层模型有三种形式：相对定位、绝对定位、固定定位。
CSS中使用positon属性实现网页的定位技术，它有四个值：
static是
position的 默认值，标签会显示在正常的文档中。也就是，在正常文档流中显示的
HTML标签，它们的
position的值默认情况下都是
static。
除了
static以外，其他三个值都可以让一个标签变成定位元素。
当一个标签被定位后，可以使用
CSS的
top、
right、
left和
bottom四个定位属性精确控制标签在HTML文档中的位置。
1、相对定位relative
position：relative;
上述定义了三个div标签，显示在正常的文档流中，上下依次排列。
现在给类名为d-positon的标签添加一个postion：relative属性，刷新浏览器，页面效果不变，如下所示。
但是，类名为d-positon的div已经变成了相对定位元素，因此可以使用 top， bottom， left 和 right 控制该div的位置。如：
left:10px 橙色div相对原来位置的左侧边缘向右偏移了10px
right:10px 橙色div相对原来位置的右侧边缘向左偏移了10px
top:10px 橙色div相对原来位置的上边缘向下偏移了10px
bottom:10px 橙色div相对原来位置的下边缘向上偏移了10px
设置如下，在正常的位置上进行偏移，效果如下：
相对定位有以下特点：
- 相对定位以元素自身的位置为基准设置位置
- 相对定位要占空间位置
- 一般子元素设置绝对定位，父元素设置相对定位（子绝父相）
2、绝对定位absolute
position：absolute;
和前面的例子基本相同，只是将position设置成absolute。那么2个绿色的div依次上下排列。橙色的div就会从正常的文档流中被忽略，并且根据right和bottom属性的值，橙色的div被直接放置在了距离浏览器的右侧边缘10px，下侧边缘10px的位置。
下面是绝对定位的另外一个例子，为类名为d-positon的div设置了absolute定位，故显示在浏览器的右下角位置 ，并且距度浏览器右侧和下方各10px。如下所示：
一个标签设置绝对定位后，默认情况下是以整个浏览器为基准进行绝对定位，如果想让橙色的标签以它的父标签，也就是绿色的div为基准进行定位的话，需要把绿色的div设置成定位元素。定位元素是指position的值是static以外的其他三个值。因为不想真的移动父标签，只是想让它变成定位元素，所以将绿色div的position设置成relative，如下所示：
一旦将绿色div设置成relative的定位元素后，橙色div的绝对定位就是以它的父标签为基准，而不再以浏览器为基准。
另一个示例：以浏览器为基准的绝对定位。
效果如下：
另一个示例：以父元素为基准的绝对定位，子绝父相（一般子元素设置绝对定位，父元素设置相对定位）
效果如下：
绝对定位有以下特点：
- 绝对定位以浏览器左上角为基准设置位置
- 当一个盒子包含在另一个盒子中，父盒子未设置定位，子盒子以浏览器左上角为基准设置位置； 当父盒子设置定位，子盒子以父盒子左上角为基准设置位置
- 绝对定位不占空间位置（类似于浮动）
3、固定定位fixed
使用固定定位，可以将页面的某个区域固定在窗体上。语法为：
position：fixed;
下面这个例子，将position设置成fixed，如下：
效果如下，无论用户怎样拖拽浏览器上的滚动条，这个区域都不会跟着移动。
固定定位表现类似于绝对定位，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。固定定位也不占空间位置，
另一个固定定位的示例：
调整浏览器的视口大小，会发现，无论怎么变，p 标签所在的位置始终距离浏览器视口的左距离为 100px，上距离为 200px。
固定定位有以下特点：
- 相对于浏览器视口本身，不会随着滚动条移动
- 固定定位也不占空间位置
4、定位位置
使用 top， bottom， left 和 right 来精确指定要将定位元素移动到的位置，这些属性的值可以使用逻辑上期望的任何单位：px，cm，%等。也可以使用负值。
5、z-index
当我们使用定位属性时，页面上的元素难免会有互相重叠的现象。此时需要考虑它们的前后顺序。如下所示有2个div，重叠在一起，如果没有设置z-index或者z-index相同，则后出现的标签将会覆盖前面的标签。因此，第2个标签覆盖在了第1个标签上。
如果给d1设置z-index:1，则它就会覆盖在第2标签的上面。如下所示：
继续给第2标签设置z-index:2，那它就会覆盖在第1标签的上面。
z-index 属性值没有单位，只有数字。z-index 仅能在定位元素上奏效（例如 position:absolute;）
给个例子：
效果：
6、练习
（1）导航条
（2）新闻列表
7、小结
（1）定位
使用css的position属性来设置元素的定位类型，postion的设置项如下：
relative生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移。absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。static默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。inherit从父元素继承position属性的值。
如果你不想移动一个元素的位置，只想让他变成定位元素，那么就使用position:relative;
（2）定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素。
（3）定位元素层级
- 位元素是浮动的正常的文档流之上的，可以使用
z-index属性设置元素的层级（堆叠顺序）。 - 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。用于处理当多个元素重叠的时候，哪些元素设置在其他元素的顶部。特别需要注意的是元素可拥有负的 。
只有好看的样式，没有合理的安排各个元素的位置，页面也做不到美观，因此 CSS 的布局也是网页样式设计编码不可或缺的内容。
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
