Detailed explanation of z-index in CSS (1)-CSS Tutorial-php.cn

Detailed explanation of z-index in CSS (1)

零下一度

Release： 2017-05-12 14:16:13

Original

1586 people have browsed it

In our commonly used css, z-index attribute is to set the stacking order of nodes. This is our common use of z-index attributes. understanding. At the same time, we are always vague about the concept of stacking order, which will cause some problems in our usual layout. Below I have some personal understanding of z-index in CSS. I hope it can help you. I hope you can correct me if I am wrong.

In css layout we often use some float:laft; and float:right; as well as absolute, relative, fixed;

## in positioning #Some people mistakenly believe that there is a stacking order between positioning and positioning. After testing themselves, they found that their default is no stacking order. It is just the order of tags in the html that causes everyone to misunderstand. It is thought to be caused by the stacking order between positioning and positioning.

The following is an example of normal use of z-index code:

The static in positioning is a standard stream, so I will not explain it here

When we have three boxes

div {
 width: 100px;
 height: 100px;
 color: white;
 float: left;
 }
.div1 {
 position: fixed;
 background-color: red;
 }
.div2 {
 background-color: blue;
 position: relative;
 }
.div3 {
 background-color: green;
 position: absolute;
 }
 </style>
</
head
>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>

Copy after login

We set fixed, relative, absolute for them respectively; the background color is red, blue, green

We will find that the green box of absolute will be at the top, change the label in the html code The position order can make the box appear at the top of the stack. Of course, if we want to not change the order of the

html tags , then we can use the second method z-index:

When we add z-index, we should note that this style has a value; the value can also affect our stacking order.

The larger the value of z-index in the style, the higher the stacking layer. Of course, we should also note that z-index does not work at all times.

Only in the same style, such as stacking between positioning and positioning,

Stacking between floating and floating, if there are two boxes, one box is a floating element and the other is positioning Element, two boxes are stacked. At this time, we want the floating box to be displayed on top of the positioning box. We have no choice. Setting z-index is useless at this time.

The stacking order of the positioned boxes themselves is higher than the stacking order of the floating boxes. So to solve this problem at this time, we need to replace the floating boxes with positioned boxes. After setting, we can z -index to set the stacking order.

The above is my personal opinion. I hope it can help everyone. I will also write some personal knowledge about the web in the future. If you have different opinions, you can feel free to express them.

【Related recommendations】

Free css online video tutorial

css online manual

php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Detailed explanation of z-index in CSS (1). For more information, please follow other related articles on the PHP Chinese website!