一天搞定CSS 層級 z index 18

2022-02-21 13:34:21 字數 1310 閱讀 5083

因為定位的出現,所以有了元素重疊的情況,此時就出現了顯示誰的情況。在多層布局時,容易出現這種情況

定位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...