relative absolute fixed三種定位差別
阿新 • • 發佈:2018-06-25
web err sta AR 另一個 static 元素 註意 瀏覽器
relative:
生成相對定位的元素,相對於其正常位置進行定位。
元素的位置通過left、right、top、button屬性進行規定,
可以通過z-index進行層次分級。
元素元素仍保持其未定位前的形狀,原本所占的空間仍將保留。
如果沒有定位偏移量,對元素本身沒有任何影響
absolute:
生成絕對定位元素。使元素脫離文檔流,並相對於其包含塊進行定位,包含塊可能是文檔中的另一個元素或者是初始包含塊,
元素原先在正常文檔流中所占的空間會會被後面元素占據;
元素定位後生成一個塊級框,而不論原來它在正常流中生成何種類型的框;
絕對定位元素的包含塊由離它最近的 ‘position‘ 屬性為 ‘absolute‘、‘relative‘ 或者 ‘fixed‘ 的祖先元素創建。只要父級元素設置了position並且不是static(默認既是static),那麽設定了absolute的子元素即以此為包含塊(最近的)。如果都沒有定義,那麽就相對於整個文檔body定位(註意不是相對於瀏覽器窗口定位)
相對定位一般都是配合絕對定位元素使用
fixed:生成絕對定位元素,相對於瀏覽器窗口的定位。通常配合z-index一起來使用。比如說網頁上懸掛的聊天圖標或者廣告就是用了fixed作者:平淡的茶葉壺
鏈接:https://www.zhihu.com/question/53545802/answer/135467197
來源:知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
relative absolute fixed三種定位差別