CSS中的position

HTML中的三種布局方式

浮動 標準流 定位

position屬性的意義

position屬性決定了元素將如何定位
通過top、right、bottom、left實現(xiàn)位置的改變

position中的可選參數(shù) relative static absolute fixed inherit

relative 參數(shù)特性

不脫離文檔流
可以利用top right bottom left 進行定位
為子定位劃分作用域
移動區(qū)域為整個網(wǎng)頁

absolute 參數(shù)特性

可以利用top right bottom left 進行定位
脫離文檔流
為子定位劃分作用域
移動區(qū)域為整個網(wǎng)頁

fixed 參數(shù)特性

可以利用top right bottom left 進行定位
脫離文檔流
為子定位劃分作用域
移動區(qū)域為整個窗口區(qū)

定位中的層級

通過順序插入，越后添加的定位元素層級越大
z-index改變層級
不同父元素中的子元素的層級各不相干

z-index屬性值

z-index：auto(默認值)
z-index：inherit（繼承）
z-index：number（number指具體數(shù)值）

z-index特性

可以設(shè)置元素的疊加順序，但依賴定位屬性
z-index大的元素會覆蓋z-index小的元素
z-index為auto的元素不參與層級比較
z-index 為負值，元素被普通流中的元素覆蓋

定位與邊距的異同

margin、padding通過控制邊距改變距離
position通過定位改變距離

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容