position:fixed 相對父元素定位

看風景就發表於2018-11-05

position:fixed是對於瀏覽器視窗定位的,要實現相當於父元素定位,可以這樣:

不設定fixed元素的top,bottom,left,right,只設定margin來實現。

這種方法本質上fixed元素還是相當於視窗定位的,實現效果上是相對於父元素定位。

此外,position:fixed元素會受到父元素的影響,而出現不能以視窗進行定位:

1. 因為fixed元素並不總是相對於視窗進行定位的,父元素髮生變換,也就是transfrom屬性發生改變,如平移或旋轉,會對固定定位的子元素產生影響 例子:固定定位不固定

2. 如果父級元素的z-index的層次比同級元素低,就算fixed的z-index比父級高,也會被父級同級元素遮擋。

因此,position:fixed元素若要以視窗進行定位,最好是放在body根標籤下

相關文章