position:absolute/relative/fixed小结

Posted 2020-07-15 Silence

1、绝对定位：position:absolute;

　　当一个div块的位置被定义为绝对定位absolute时，也就意味着它失去了文档流的位置，后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是0，那么它将漂浮在原来的位置上，否则，会根据相对该元素外的第一个非static属性的元素进行定位，如果没有非static属性的父元素，则相对于body定位。当偏移后超出浏览器视线的向下或向右的内容不会被隐藏，而是会出现滚动条，但是向左或向上的内容超出后会被隐藏。

2、相对定位：position:relative;

 　　当设置了相对的偏移量后，这个div原来所占据的位置（文档流）不会被后面的文档流填补，而是空在那里。当偏移后所有超出浏览器视线的内容会被隐藏。

3、position:fixed;固定定位

　　设置后，元素脱离文档流，可以使层级固定不动。

4、absolute/relative/fixed三者区别：

　　①相对定位relative不会失去文档流的位置，而绝对定位absolute会失去原来在文档流中的位置，被后面的内容所取代。

　　②无论是相对定位relative、固定定位fixed还是绝对定位absolute，当偏移量内容超出上面、左边浏览器窗体（即可视区域）的时候，超出内容都会被隐藏；但是当偏移量内容超出右边、下面窗体的时候，相对定位relative会隐藏超出部分，而固定定位fixed、绝对定位absolute会出现滚动条。

　　③相对定位relative、固定定位fixed和绝对定位absolute都会脱离正常文档流，浮动在正常文档流的上面，如果遮盖了正常文档流，可以通过设置z-index来解决。

5、absolute/relative/fixed实际应用

①position的值为absolute或fixed可以创建一个BFC

　　BFC：块级格式化上下文，把浮动的元素框起来，浮动不会溢出，相当于页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素。

　　BFC作用：　a.清除浮动

　　　　　　　　b.防止margin折叠

　　　　　　　　c.左右两栏布局

②position：fixed  能够使层固定不动，比如使导航栏不会随页面滚动而滚动。

③绝对定位里这些值可以不指定，能够自动计算：top/left/right/bottom/width/height ，如果冲突了，以width和height为准。处理冲突也是可以进行一些利用，比如居中。