關於position的層級

2022-05-08 08:27:09 字數 526 閱讀 5199

在層級比較多的頁面中,經常會出現被遮蓋的情況。下面用例項來講講這個問題的解決方法。

其實宗旨就一條:第乙個父元素的層級一定要比第二個父元素的層級要高

先看一下不如意的**

父級元素1

子級元素1

父級元素2

子級元素2

不如意的顯示效果:

父級元素1

子級元素1

父級元素2

子級元素2

正確顯示結果

總結:無論想要得到什麼樣的效果,只要你把需要放在最上層的元素的父級元素(及設定position:relative)的z-index值設定成最大的就可以了

position 元素層級

1 position設定元素的定位方式 left right top bottom相當於座標點和參考點的關係 1 預設值為static 靜態 2 relative 相對定位 相對於自己的位置偏移 3 absolute 絕對定位 相對於非static最近的父級元素 一般來說是relative的 4 f...

關於 position 的設定

position 用於常見的定位設定,主要包括absolute relative fixed 一 absolute絕對定位相對於瀏覽器視窗左上角移動或static 定位以外的第乙個父元素進行定位。設定完成後它會脫離原來的文件流 一般情況有絕對定位必有相對定位 position absolute le...

關於css中的position

對於position的幾個屬性 static 無特殊定位,物件遵循html定位規則 absolute 將物件從文件流中拖出,使用left,right,top,bottom等屬性進行絕對定位。而其層疊通過z index屬性定義。此時物件不具有邊距,但仍有補白和邊框 relative 物件不可層疊,但將...