在層級比較多的頁面中,經常會出現被遮蓋的情況。下面用例項來講講這個問題的解決方法。
其實宗旨就一條:第乙個父元素的層級一定要比第二個父元素的層級要高。
先看一下不如意的**
父級元素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 物件不可層疊,但將...