ife-task3:三栏式布局--再谈position 属性的基本知识

1.static：

这个关键字使得这个元素使用正常的表现，即元素处在文档流中它当前的布局位置，top, right, bottom, left 和 z-index 属性无效。

2.relative：相对定位

相对定位（position: relative）的元素仍然被认为是处于文档流之中。

使用这个关键字来布局元素就好像这个元素没有被设置过定位一样。即会适应该元素的位置，并不改变布局（这样会在此元素原本所在的位置留下空白）。

position:relative对table-*-group, table-row, table-column, table-cell, table-caption无效。

如下CSS代码，可以将元素定位到距离它本来位置的顶部和左侧分别 20px 的位置。

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box {
display: inline-block;
background: red;
width: 100px;
height: 100px;
float: left;
margin: 20px;
color: white;
}

#two {
position: relative;
top: 20px;
left: 20px;
}

3. absolute：绝对定位

绝对定位（position: absolute）的元素则被认为脱离了文档流。绝对定位元素的位置是相对于他最近的定位祖先元素（position值非static）。如果没有这样一个祖先元素，则相对于原始的容器。

不为元素预留空间，元素位置通过指定其与它最近的非static定位的祖先元素的偏移来确定。

绝对定位的元素可以设置外边距（margins），并且不会与其他边距合并。

#one { position: relative; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }

4. fixed：固定位置

不为元素预留空间。通过指定相对于屏幕视窗的位置来指定元素的空间，并且该元素的位置在屏幕滚动时不会发生改变。打印时元素会出现在的每页的固定位置。

fixed属性通常会创建新的栈环境。

#one { position: fixed; top: 80px; left: 20px; }