S规则来实现绝对定位：
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
这里我们给我们的中间段一个position的 absolute值，并且和前面一样加上 top和left属性。但是，添加此代码将给出以下结果：
这和之前截然不同！定位元素现在已经与页面布局的其余部分完全分离，并位于页面的顶部。其他两段现在靠在一起，好像之前那个中间段落不存在一样。top和left属性对绝对位置元素的影响不同于相对位置元素。在这种情况下，他们没有指定元素相对于原始位置的移动程度。相反，它们指定元素应该从页面边界的顶部和左边的距离(确切地说，是 <html>元素的距离)。
我们现在暂时不讨论固定定位（ fixed positioning ）——它基本上以相同的方式工作，除了它仍然固定在浏览器窗口的边缘，而不是它定位的父节点的边缘。
CSS 表格
HTML表格对于显示表格数据是很好的，但是很多年前——在浏览器中支持基本的CSS之前——web开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中。这在当时是有效的，但它有很多问题——表布局是不灵活的，非常重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题）。
CSS表格的存在是为了让您能够像表格一样布局元素，而不需要上面描述的任何问题——这听起来可能有些奇怪，您应该使用表格元素作为表格数据，但有时这可能是有用的。例如，您可能想要列出一个表单，其中有标签和文本输入；这可能很棘手，但是CSS表使其变得容易。
让我们来看一个例子。首先，创建HTML表单的一些简单标记。每个输入元素都有一个标签，我们还在一个段落中包含了一个标题。为了进行布局，每个标签/输入对都封装在<div>中。
<form>
<p>First of all, tell us your name and age.</p>
<div>
<label for="fname">First name:</label>
<input type="text" id="fname">
</div>
<div>
<label for="lname">Last name:</label>
<input type="text" id="lname">
</div>
<div>
<label for="age">Age:</label>
<input type="text" id="age">
</div>
</form>
现在，我们例子中的CSS。除了使用 display属性外，大多数CSS都是相当普通的。 <form>, <div>, <label>和<input>被告知要分别显示表、表行和表单元——基本上，它们会像HTML表格标记一样，导致标签和输入在默认情况下排列整齐。我们所要做的就是添加一些大小、边缘等等，让一切看起来都好一点，我们就完成了。
你会注意到标题段落已经给出了 display: table-caption;——这使得它看起来就像一个表格<caption> ——和caption-side: bottom; 让标题在表格的底部下进行设计，即使标记是在源的输入之前。这就能让你有一点灵活的弹性。
html {
font-family: sans-serif;
}
form {
display: table;
margin: 0 auto;
}
form div {
display: table-row;
}
form label, form input {
display: table-cell;
margin-bottom: 10px;
}
form label {
width: 200px;
padding-right: 5%;
text-align: right;
}
form input {
width: 300px;
}
form p {
display: table-caption;
caption-side: bottom;
width: 300px;
color: #999;
font-style: italic;
}
结果如下：
柔性盒子
CSS是一种功能强大的语言，它可以做很多事情，但它却在布局上有所下降。传统的老式布局方法，如float和positioning工作，但有时它们会感觉比他们需要的更复杂、更灵活、更有弹性。例如，如果你想要：
- 垂直中心盒子的内容(不仅仅是文本；
line-height 将会失效)。
- 制作几列有相同的高度包含不同数量内容的列，不使用固定的高度，或用背景图像伪装。
- 在一行中创建几个盒子，占用相同数量的可用空间，不管有多少个，并且如果它们有内边距，外边距等就应用它。
上面的例子几乎不可能通过常规的CSS实现——柔性盒子(或flexbox)是为了让这些东西更容易实现而被发明的。
让我们来看一个例子；首先，一些简单的HTML：
<section>
<div>This is a box</div>
<div>This is a box</div>
<div>This is a box</div>
</section>
<button class="create">Create box</button>
<button class="reset">Reset demo</button>
这里我们有一个<section>元素，里面有三个<div>，再加上几个按钮来创建一个新盒子，和重新设置demo。默认情况下，子元素不会被布局或改变大小，使用传统的方法，我们必须仔细地对每个元素设置大小，允许宽度、外边距、边框和内边距，如果我们添加了另一个子元素，我们就必须完全改变所有的值。
使用Flexbox替代它：
html {
font-family: sans-serif;
}
section {
width: 93%;
height: 240px;
margin: 20px auto;
background: purple;
display: flex;
}
div {
color: white;
background: orange;
flex: 1;
margin-right: 10px;
text-shadow: 1px 1px 1px black;
}
div:last-child {
margin-right: 0;
}
section, div {
border: 5px solid rgba(