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

Home

Web Front-end

CSS Tutorial

Detailed explanation of z-index in CSS (1)

零下一度

May 12, 2017 pm 02:16 PM

Z-index

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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn