理解定位模式

position一共有几个属性

static：是position的默认属性，它的位置取决于合模型；

absolute：绝对定位；

绝对定位的元素会完全地从常规文档流中脱离。对于包围它的元素而言，它会将该绝对定位元素视为不存在，就像是漂浮起来一般。

通过 top, right, bottom, 和 left 四个属性来设置绝对定位元素的位置。默认值都为 auto。

绝对定位的关键是知道它的起点在哪里。如果 top :20px,那么你要知道这20px是从哪里开始计算的。

绝对定位的起点分两种情况，一种是父元素是的position是static；另一种扶元素的position不是static。

也就是说当你在一个元素的样式上设置 position:absolute 意味着需要考虑父元素。

1: 如果父元素的 position 值不为 static ，那么绝对定位元素的起点为父元素的左上角位置（以扶父元素为参照物）。

2: 如果父元素没有应用除了 static 以外的 position 定位，那么它会检查父元素的父元素是否有应用非 static 定位。如果该元素应用了定位，那么它的左上角便会成为绝对元素的起点位置。如果没有则会继续向上遍历DOM直到找到一个定位元素或者寻找失败以到达最外层的浏览器窗口。

relative：相对布局；

和绝对布局一样通过 top, right, bottom, 和 left 四个属性来设置绝对定位元素的位置。默认值都为 auto。

一个元素设置成relative之后，也是向absolute一样是漂浮起来的，但是是原地的漂浮，可以想象成，军训的时候，教官叫一个同学出列，在他周围的都原地不动，教官命令他前走50米，左走50米，也不影响他原先的队列。这就是相对定位。

fixed：

固定定位的行为类似于绝对定位，但也有一些不同的地方。

首先，固定定位总是相对于浏览器窗口来进行定位的，并且通过哪些属性的 top, right, bottom, 和 left 属性来决定其位置。它抛弃了它的父元素，它就是定位中表现地有点儿反叛。。

第二个不同点是其在名字上是继承的。固定定位的元素是固定的。它们并不随着页面的滚动而移动。你可以告诉元素它所处的位置并永远不再移动。噢~好像还挺乖巧的。

在某种意义上说固定定位元素有点儿类似固定的背景图片，只不过它的外层容器块总是浏览器窗口罢了。如果你在 body 中设置一个背景图片那么它与一个固定定位的元素的行为时非常像的，只不过在位置上的精度会略少一些。

背景图片也不能改变其在第三个维度的大小，也因而带来了 z-index 属性。

inherit：继承父元素；

 

 

转载于:https://www.cnblogs.com/mohe/p/3401983.html