确切的说，是定位的方式，属性名是 position，可用的取值也并不多，四五个而已。但是除了默认值 static 之外，可以说其他的每个值都对应了一套定位方式，就需要仔细区分清楚，这就不是像前面介绍属性值那样，三言两语就可以说清楚的了。
静态定位 static
我们前面做的排版，完全就是基于这个前提的，所以可以说我们对这个定位方式已经很了解了。它不需要某些额外的属性来辅助（后面涉及到这些属性），依靠文档流的原始力量来进行定位。
相对定位 relative
这个分两步操作：首先，我们就像什么都没发生一样进行布局。然后，保持这个布局不变的前提下，把相对定位的元素移动到它们被定位到的地方。
所以，其他元素（不包含这个元素的后代元素）受到影响么？没影响，它们应该保持不动。
被定为元素原来的位置会被保留么？会的，因为其他元素没动，所以没人抢占它的位置。
那怎么确定它的位置呢？四个属性 left 、 right 、 top 、 bottom，表示从当前位置向某个方向移动相应的距离。一个都不写，就是保持原来的位置不动。上下互斥，只能写一个方向，同理，左右互斥。
z-index，Z 轴的顺序，说的是元素间堆叠的顺序，值越大，就越在上层，就不会被后面的元素遮挡。
这些在后面会有练习进行演示。
绝对定位 absolute
依旧是分两步走：首先假装没有这个元素，进行布局；然后保持当前布局不变，把这个元素放在定位位置。
那么它都没有原来位置可言了，相对于谁来定位呢？相对于从它向外第一个不是静态定位的祖先元素。
定位使用的属性还是上面五个，区别只在于，相对于谁发生了变化。
固定定位 fixed
和上面很像，我就不重复了，唯一的区别只在于：相对于谁定位。
固定定位是相对于浏览器窗口定位，那么页面滚动就与它无关了，因为浏览器不动，它就不动。这是什么？漂浮元素，对吧。
而且因为不保留位置，不相对于祖先元素定位，把它写在哪里也不重要了。
粘性定位 sticky
先说清楚，这是一个实验性的值，所以，如果需要使用，先认真查阅它的兼容性。
这家伙综合了上面很多特性，首先它保留原有位置，然后它是相对于浏览器窗口定位。最后，开始时，它和静态定位是一样的，只有当页面滚动到符合它定位的位置时，它才和浏览器保持相对不动。而反向滚动，回到它原来的位置时，它又停在了自己原来的位置。
就像有些网站的导航栏，看起来一切正常，但是向下滚动页面时，导航栏一直显示在最顶部。滚动回页首，它又停在了它布局的位置。
五种定位方式说完了，都是重点哦，我已经努力的把重点简练成了这样，又特别告诉你们了，所以要记住哦！
我们下一章开始应用它们。
暂无评论内容