css模型之层模型

css层模型说的是position这个属性，它有四个常用值，分别是static、relative、absolute、fixed。

1.static：这个是元素的默认值，特点是页面会依照自左向右、自上向下的方向布局，并且设置top、right、bottom、left值是没有用的，并且设置z-index也是没有用的，不能进行特殊定位；

2.relative：相对定位，什么是相对？相对于谁？相对是 相对于自身 原本不设置此属性值时 应该在的位置，即默认的文档流应该在的位置。特点是，设置此属性值后该元素依然占据着原本属于自己的位置，但是可以通过设置top、right、bottom、left（简称TRBL）、z-index值来改变相对于自身的位置。

打个比方就是原来所有的元素都在一层楼平铺，现在设置后该元素会上升到二层楼，但是虽然“我”虽然在二层，脚下原本属于“我”的一层楼的位置“我”还占据着，谁也不给。这样就可以在占据原本位置的情况下，通过设置上右下左的值飘在一层元素的头上。

这样做本身没有多大意义，也不经常使用。经常的用法是作为后代元素的“参照物”，什么意思稍后再说。

3.absolute：绝对定位，绝对定位常用于定位在页面中显示位置特殊、用盒子模型不容易定位的位置。特点是，设置此属性后，该元素会脱离原来的文档流，其他的和相对定位相同。

打个比方就是“我”原来在一层，设置此属性值后，“我”上升到二层的高度，“我”脚下的原来的位置也不要了，依据默认的文档流，后面的元素会补充在我脚下，占据“我”原来的位置。

然后问题来了，“我”定位时怎么办呢，相对定位是上升到二层还能待在自己原本的位置，那“我”怎么办，“我”不能也相对于自己原来的位置定位啊，如果和相对定位一样，那设计时为什么定义两个效果一样的属性值，设计师闲得慌？那“我”该怎么办？

办法就是“我”得①寻找一个参照物，参照物？什么是参照物？此处说的参照物就是上文中提到的relative相对定位，当然也可以是absolute和fixed当做参照物，但不能是默认的static。有了这个方法，“我”就去找参照物了，那么问题又来了，怎么找？兄弟元素、子代元素的定位能作为参照吗？当然不能，“我”需要顺着②DOM树向直系祖先元素找，其他的旁系都不管。那么又有问题了，“我”的父级元素和祖父级元素都设置了定位，我该相对于谁？答案③是最近的祖先元素，也就是父级元素。最后一个问题？？？怎么这么多，我想定个位就这么难吗......脸上笑嘻嘻的继续找，心里mmp。问题是，如果“我”一直找一直找，到最后也没有找到符合条件的祖先元素呢？有说“我”是相对于浏览器窗口左上角的、也有说是相对于body的？“我”到底该相信谁.....最后经过“大量”实践，“我”自己得出，他们说的都对，但是都有前提条件。啊，这个真的复杂，不知道如何组织语言。。。

1）相对于body，因为body有个默认的margin外边距8px，上右下左都有,（条件不重置body的外边距且不设置TRBL），那么“我”就是相对于body左上角定位的，给body设置外边距，“我”就会跟着它走，同样给它设置border、padding也会影响“我”的位置。

div距上左的值就是html的盒子模型值+body的盒子模型值，同时相对于body定位，跟着body走。

2）相对于浏览器窗口左上角，（条件，设置TRBL值 且 垂直和水平方向都至少有一个值），设置后，div就不管html和body了。

div设置了left和top值，即垂直方向上和水平方向上都有值，那么div就会相对于浏览器窗口的左上角定位，html和body都右移了，而div不管，你们爱去哪去哪，“我”就相对于浏览器窗口左上角定位；

3)第三种情况比较特殊，前两种结合。。。。。尼玛，还有这操作。。。

div的上边距20px就是定位时top：20px，相对于浏览器窗口上边；左边距定位时没有设置，所以它的70px=body-margin-left+body-border-left+body-border-left=50+10+10，相对于body；

总结一下就是，定位时垂直方向 或 水平方向上，如果设置值，那么这个方向就按设置的这个值相对于浏览器窗口定位；如果这个方向上没有设置值，那么就按照在这个方向上的html+body的盒子模型的值之和定位。其实归根结底还是相对于浏览器窗口，在这个方向上，如果定位时设置了值，那么就按这个值，如果没有就按这个方向上的盒子模型的值之和。

注：absolute经常和relative配合使用。

4.fixed，固定定位，相对于浏览器窗口的左上角，常用于广告位、悬浮窗、头部、底部的定位，特点是脱离文档流，不会随着鼠标的滚动而滚动，就相对于浏览器窗口固定死了不动。

注：只有设置relative、absolute、fixed后，z-index属性才会生效。

表达能力不佳，可能读者读完也不知所云，我相信两句话：尽信书不如无书 和 绝知此事要躬行。所以我建议，读者还是自己亲自实践，我只是参考。

有误请指出，非常感谢！

 

转载于:https://www.cnblogs.com/yk-68/p/8436590.html