因為定位的出現,所以有了元素重疊的情況,此時就出現了顯示誰的情況。在多層布局時,容易出現這種情況定位position見:
但層級規則可以通過z-index來設定
1.在正常情況下,層級的大小由順序決定,後面的元素要比前面的元素的層級要高
charset="utf-8">
title>
div .div2
span
style>
head>
kaivon1div>
class="div2">kaivon2div>
spanspan>
body>
html>效果圖
2.有定位元素的層級要比沒有定位元素層級要高
charset="utf-8">
title>
div .div1
.div2
/*span*/
style>
head>
class="div1">kaivon1div>
class="div2">kaivon2div>
body>
html>效果圖
層級由屬性z-index來控制:
它的值是乙個數字,數字越大層級越高(在同乙個層裡)
**演示charset="utf-8">
title>
div .div1
.div2
style>
head>
class="div1">kaivon1div>
class="div2">kaivon2div>
body>
html>
CSS層級關係 z index
做過頁面布局的同學對z index屬性應該是很熟悉了,z index是針對網頁顯示中的乙個特殊屬性。因為顯示器是顯示的圖案是乙個二維平面,擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。...
一天搞定CSS 終篇CSS總結
雖然說是一天搞定css,實際上也沒有那麼簡單。只能說讓你快速了解常見的css知識,解決基本的頁面樣式布局和設定。每個獨立的css知識點都比較簡單,但是它們的應用非常靈活,特別是在綜合應用中。粗略說,大概也就十幾個知識點 1.css基本概念,以及分類 2.錶框border 粗細,樣式,顏色 3.背景b...
一天搞定CSS css選擇器 07
選擇器 是指選擇標籤的方法 演示 演示 演示 演示 charset utf 8 title div,p,section,title1,title2,head style head div p section id title1 h1 id title2 h2 class head header bo...