在CSS中,absolute定位是相對于其最近的已定位祖先元素進行定位的,如果沒有祖先元素被定位,則相對于最初包含塊進行定位。
文檔層級(z-index)屬性可以用于控制元素的堆疊順序。默認情況下,元素按其在HTML文檔中出現的順序進行堆疊,但是可以通過使用position屬性和z-index屬性來更改此順序。
下面是一個例子,其中一個div被定位為相對定位,另一個div被定位為絕對定位。絕對定位的元素使用了z-index: 1;屬性,使其顯示在相對定位的元素上方:
<style> .relative { position: relative; } .absolute { position: absolute; top: 50px; left: 100px; z-index: 1; background-color: blue; } </style> <div class="relative"> <p>相對定位元素</p> <div class="absolute">絕對定位元素</div> </div>
在此示例中,絕對定位的元素(藍色)通過z-index:1的屬性浮在相對定位的元素(白色)之上。
注意:如果兩個元素都具有相同的z-index值,則它們將按照它們在HTML文檔中出現的順序進行堆疊。
上一篇css 鼠標滑過板塊變色
下一篇css 鼠標點擊無效