關於css中的子絕父相


剛開始學習css的時候一直認為只有父元素設置了position:relative子元素設置的position:absolute才會相對於父元素起效。否則就會向上一級搜尋設置了relative屬性的元素並相對於其進行定位。

后來發現並不是

父元素設置了position:fixed屬性的話子元素一樣可以根據相對於父元素進行定位。之所以一直強調的是子絕父相,這是因為在標准流下,我們如果給父元素設置fixed來將其作為子元素的參考位置,那么因為設置了fixed屬性的元素是脫離標准流的,所以下面的盒子會填補設置了fixed屬性的設置,也即前面所說的父元素。在大多數情況下,這是我們不希望看到的,我們希望父元素仍然可以保留原來的位置,其余的盒子位置不受影響,所以我們一直強調,子絕父相。

但如果我們想要作為位置參考的元素本就是期望不占有位置的元素,那其子元素在設置了position:absolute之后,父元素沒有必要再去設置position:relative;這樣反而會導致父元素原先設置的position:fixed;不起效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM