你了解css的几种定位吗?

1.静态定位(static)

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

2.绝对定位(absolute)

绝对定位的元素从文档流中拖出(会改变其他元素的布局，不会在此元素本来位置留下空白。)，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位,如果元素的父级没有设置定位属性，则依据 body 元素左上角作为参考进行定位.

3.相对定位(relative)

相对定位元素不可层叠(不会改变其他元素的布局，会在此元素本来位置留下空白。)，依据left、right、top、bottom等属性在正常文档流中偏移自身位置.相对于自身的左上角定位.

4.固定定位(fixed)

固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。 固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

5.z-index

只能在绝对定位(absolute),相对定位(relative),固定定位(fixed)中使用堆叠顺序

总结

绝对定位好像把不同元素安排到了一栋楼的不同楼层(除首层，文本流放在首层)，它们之间互不影响；相对定位元素在首层，与文本流一起存放，它们之间互相影响。

被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，它浮了起来，其实设置了相对定位也会让元素浮起来，但它们的不同点在于，相对定位不会删除它本身在文档流中占据的空间，其他元素不可以占据该空间，而绝对定位则会删除掉该元素在文档流中的位置，使其完全从文档流中抽了出来，其他元素可以占据其空间，可以通过z-index来设置它们的堆叠顺序 。

全量分析 阅读量：

评 论：