12-z-index

Posted 897463196-a

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了12-z-index相关的知识,希望对你有一定的参考价值。

z-index                                     

这个东西非常简单,它有四大特性,每个特性你记住了,页面布局就不会出现找不到盒子的情况。

  • z-index 值表示谁压着谁,数值大的压盖住数值小的,
  • 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
  • z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在html后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
  • 从父现象:父亲怂了,儿子再牛逼也没用
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .father1{
12             width: 300px;
13             height: 300px;
14             background-color: red;
15             position:relative;
16             z-index: 3;
17         }
18         .child1{
19             width: 100px;
20             height: 100px;
21             background-color: purple;
22             position: absolute;
23             top: 280px;
24             left: 350px;
25             z-index: 20;
26 
27         }
28         .father2{
29             width: 300px;
30             height: 300px;
31             background-color: green;
32             position:relative;
33             z-index: 2;
34         }
35         .child2{
36             width: 100px;
37             height: 100px;
38             background-color: yellow;
39             position: absolute;
40             top: 0;
41             left: 350px;
42             z-index: 21;
43         }
44     </style>
45 </head>
46 <body>
47     <div class="father1">
48         <div class="child1"></div>
49     </div>
50     <div class="father2">
51         <div class="child2"></div>
52     </div>
53     
54 </body>
55 </html>

技术图片

 

 

作者:流浪者

日期:2019-08-31

 

以上是关于12-z-index的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

片段和活动之间的核心区别是啥?哪些代码可以写成片段?

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数