z-index的特色

時間 2021-01-10

標籤 css html spa code htm blog utf-8 class 欄目 CSS 简体版

原文原文鏈接

思路:
①z-index的結構/定位元素默認的z-index
②z-index單位
③能不能用子元素和父元素比較
④父元素沒有z-index，能不能經過子元素控制他們的層級=>改變層級，父元素z-index
z-index屬性的特色css

默認是書寫順序在後的定位元素覆蓋在順序前的定位元素
能夠使用z-index屬性修改定位元素的層級關係
全部定位元素的z-index默認值都是同樣的
z-index值是數字沒有單位,支持負數
通常都是同級元素進行層級的比較

當參照物是相對定位或絕對定位的時候,父級元素之間沒有z-index值,子級元素的z-index 值會出來作比較html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style type="text/css">
 7 /*
 8  z-index的特色
 9  1.都有定位元素的標籤 在後面的標籤的z-index要比在前面的z-index的值要大
10  z.z-index沒有單位 支持負值
11  3.z- index通常都是同級元素的比較 子元素和父元素去比較z-index並不遵
12  循咱們說的規律:值越大越在上(咱們通常不會拿子元素去跟他的父元素去比較
13  z-index的大小)
14  4.z-index屬性不能繼
15  */
16 .red{
17 width: 200px;
18 height: 200px;
19 background-color: red;
20 position: absolute;
21 z-index: -1;
22 }
23 .blue{
24 width: 400px;
25 height: 400px;
26 background-color: blue;
27 position: absolute;
28 z-index: 9;
29 }
30 .wrap{
31 width: 500px;
32 height: 500px;
33 background-color: #ccc;
34 position: relative;
35 z-index: 99;
36 }
37 
38 .parent1{
39 position:absolute;
40 width: 200px;
41 height: 200px;
42 background-color: #A52A2A
43 }
44 .parent2{
45 position:absolute;
46 width: 300px;
47 height: 400px;
48 background-color: #FF00FF
49 }
50 .son1,.son2{
51 position: relative;
52 }
53 .son1{
54 z-index: 9;
55 }
56 .son2{
57 z-index: 10;
58 }
59 </style>
60 </head>
61 <body>
62 <!-- <div class="red"></div>
63 <div class="blue"></div> -->
64 <div class="wrap">
65 <div class="blue"></div>
66 <div class="red"></div>
67 </div>
68 
69 <div class="parent2">
70 <div class="son2"></div>
71 </div>
72 <div class="parent1">
73 <div class="son1"></div>
74 </div>
75 </body>
76 </html>

1. Node的特色
2. HTTP的特色
3. Java的特色
4. SQL 的特色
5. Node.js的特色
6. P2P的特色
7. Criteria的特色
8. HBase的特色
9. HDFS的特色
10. IntentService的特色
更多相關文章...
• PHP imagecolorclosesthwb - 取得與指定的顏色最接近的色度的黑白色的索引 - PHP參考手冊
• PHP imagecolorclosest - 取得與指定的顏色最接近的顏色的索引值 - PHP參考手冊
• JDK13 GA發佈：5大特性解讀
• 漫談MySQL的鎖機制

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。