层模型（Layer Model）是在网页布局中引入图像软件中层的概念，以用于精确定位网页中的元素。这种网页布局模式的初衷是摆脱 HTML 默认的流动模型所带来的弊端，以层的方式对网页元素进行精确定位与层叠，从而增强网页表现的丰富性。
层模型可以精确定位网页中元素的相对位置，可以相对于浏览器窗口、相对于最近的包含元素（即父元素）、或相对于元素原来的位置。层模型可以实现元素之间的层叠显示效果，这在流动模型中是不具备的。
为了支持层布局模型，CSS 提供了 position 属性进行元素定位，以方便精确定义网页元素的相对位置。
position
语法：position: static | absolute | fixed | relative
值：
static :默认值。无特殊定位，对象遵循 HTML 定位规则，不能通过z-index进行层次分级。。
absolute :将对象从文档流中拖出，使用 top, bottom, left, right 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，或当父级 position 为 static 时，absolute元素将以 body 坐标原点进行定位。而其层叠通过 z-index 属性定义。
fixed :未支持。固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
relative :不脱离文档流，对象不可层叠，参考自身静态位置通过 top, bottom, left, right 定位在正常文档流中偏移位置，并且可以通过z-index进行层次分级。
提示：您可以先修改部分代码再运行
absolute
绝对定位，CSS 写法“position: absolute; ”。它的定位分两种情况，如下：
1. 没有设定 top、right、bottom、left 的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红色部分（父级黄色区域有 Padding 属性，“坐标原始点”和“内容区域原始点”不一样）。
2. 有设定 top、right、bottom、left 的情况，这里又分了两种情况如下：
(1)父级没 position 属性，浏览器左上角（即 body）为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定（上面例子绿色部分）。
(2)父级有 position 属性，则遵循“CSS 包含块”的布局原则，寻找最近的包含有 position 属性的父级的“坐标原始点”为原始点（上面例子浅蓝色部分）。
relative
相对定位，CSS 写法“position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 body 的“内容区域原始点”为原始点，位置由 top、right、bottom、left 属性决定，且有“撑开或占据高度”的作用，上面例子橙色部分。
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
