相对定位、绝对定位和固定定位、z-index属性

554 阅读1分钟

position默认值是 static 

position:relative【相对自身原来位置进行偏移 】

position:absolute【绝对定位,设置绝对定位之后,前面的会被后面的盖住】

【注意使用时:(子绝父相):子元素使用绝对定位,那么它的父元素就必须要用相对定位】

position:fixed【固定定位】 

z-index:0【调整元素定位时重叠层的上下位置】【它的属性值是整数,默认值为0】

(要想提高层级 就要用z-index)   (z-index值大的层,位于其值小的层,上方)     

(relative、absolute、fixed都可以使用)

相对定位小结

(1)设置相对定位的盒子会相对他原来的位置,通过指定偏移,到达新的位置。

(2)设置了相对定位的网页元素,无论是在标准流中还是在浮动流中,都不会

         对它的父级元素和相邻元素有任何影响,它只针对自身原来的位置进行偏移。

绝对定位小结

(1)使用绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。

         如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。

(2)绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会

         造成影响。

固定定位小结

(1)元素的位置相对于浏览器窗口是固定位置即使窗口是滚动的,它也不会移动。

(2)Fixed定位元素的位置与文档流无关,因此不占据空间。