Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to understand the z-index in CSS attributes". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand z-index in CSS attributes".

If you are not a novice in csser, you must have a general understanding of the use of z-index. Z-index can control the stacking order of positioning elements perpendicular to the display (Z axis). This article does not talk about how the basic API is used, but to learn more about how z-index works, what are the problems with using z-index, and the use of z-index in daily development.

Let's introduce today's text, code example, through an example:

The code is as follows:

.red, .green, .blue {

Position: absolute

Width: 100px

Height: 100px

Text-align: center

Line-height: 100px

Color: # fff

}

.red {

Background-color: red

Z-index: 1

}

.green {

Background-color: green

Top: 70px

Left: 70px

}

.blue {

Background-color: blue

Top: 140px

Left: 140px

}

Red box

Green box

Blue box

As shown below:

The above code is easy to understand, so here is a question for you to think about:

How do I use the red span element after the green and blue elements if I follow the following rules?

1) html tags cannot be changed in any way

2) you cannot add or change the z-index attribute of any element

3) do not add or change the position attribute of any element

Please think about how to solve this problem. Explain why?

-- dividing line--

1. Z-index Golden Rule and stack context

1) A box and its father have the same stacking level (stack level) unless the box is assigned a different stack level through the z-index attribute

2) the z-index attribute is only applicable to element objects whose position attributes are relative, absolute, and fixed.

3) setting an opacity attribute value of less than 1 to a positioned element means that a stack context is created, just like adding a z-index value to the element

4) for a positioned box, if the z-index attribute is specified, it means:

-> the stack level of the box is in the current stack context

-> the box created a local stack context

5) if box does not specify z-index, the elements are stacked (stacked) in the following order (from back to front):

-> boxes in the normal stream, according to the sequence in the source code

-> floating boxes

-> boxes whose display attribute value is inline/inline-block/inline-table after computed

-> positioned boxes and boxes set the opacity value less than 1, according to the sequence in the source code

So when we set z-index for a positioned element, we do two things:

1) this element shares the same stack context as the element before or after it, which is why we change the value of z-index, and the element moves other elements before and after.

2) create a new stack context for any element within the element, and once you create a stack context, any layer within the stack context will stay in the stack context.

Through the above golden rule, you may already know the answer to the above question. In the Golden Rule, we mention a new term "stack context". Let's introduce it through an example:

The code is as follows:

Z-index example

Header

I am paragraph. I am em

A very special case is that in a document, there is no positioning, and the document has one and only one stacking environment-created through HTML.

Let's add the following style to the above example:

The code is as follows:

H2, p {

Position: relative

}

H2 {

Z-index: 2

}

P {

Z-index: 1

}

In this case, H2 stack context p both creates a stack context, both of which are in the stack context of document. After adding the style, H2 is above the p element. What if we add the following style to the em element:

The code is as follows:

H2, p, em {

Position: relative

}

H2 {

Z-index: 2

Background-color: # f0f

}

P {

Z-index: 1

Background-color: # 00f

Line-height: 40px

}

Em {

Z-index: 1

Background-color: # f00

}

After adding this style, em creates stack context, and because of the z-index attribute of em, its internal text is closer to the user than the other text in the p tag. Because it is inside the stack context of p, it is always lower than the text in H2.

Note: if you increase the value of z-index, you cannot use em above H2. If you want the elements of one context to be above the elements of another context, you must either promote the entire context or set them to the same context.

Here are two solutions:

Option 1:

The code is as follows:

H2, p, em {

Position: relative

}

H2 {

Z-index: 2

Background-color: # f0f

}

P {

/ * raise the entire context,p and em is all above H2 * /

Z-index: 3

Background-color: # 00f

Line-height: 40px

Margin-top:-40px

}

Em {

Z-index: 1

Background-color: # f00

}

Option 2:

The code is as follows:

H2, p, em {

Position: relative

}

H2 {

Z-index: 2

Background-color: # f0f

}

P {

Background-color: # 00f

Line-height: 40px

Margin-top:-40px

}

Em {

/ * put them into the same context * /

Z-index: 2

Background-color: # f00

}

II. Creating stack context and matters needing attention

So what are the ways to create a stack context?

1) When an element is the root element of a document (theelement)

2) When an element has a position value other than static and a z-index value other than auto

3) When an element has an opacity value less than 1

Update: In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

In WebKit, styling a box with position:fixed or-webkit-overflow-scrolling:touch implicitly creates a stacking context, just like adding a z-index value.

Also, be aware of these CSS3 "triggers":

Transform! = none

Transform-style: preserve-3d

Filter! = none

Clip-path, mask

Lastly, even though a relatively positioned element without a z-index set does not establish a stacking context...

A common IE bug, often seen in drop-down menus, is that any relatively positioned element that has haslayout set to true establishes a stacking context.

One may visualize this bug by setting [A] and [B] to position:relative, while [a] gets position:relative; z-index:1.

Now, dragging [A] under [B] hides [a]-in Internet Explorer, that is. Any positioned child with a z-index is caught by this wrong stacking context of its parent.

Third, the problems of z-index in some browsers

1) in IE6

The select element is a window control, so it always appears at the top of the cascading order regardless of the natural cascading order, the position attribute, or the z-index. You can add an iframe to the div element and set the z-index of div to be higher than that of iframe.

2) because the parent container (element) is located, IE6/7 will reset its stacking context incorrectly.

3) in the Firefox2 version, a negative z-index value puts the element after the stacking context rather than before the accepted element stacking context such as the background and border.

This article concludes with the answers to the questions raised at the beginning of this article:

The code is as follows:

/ * add this * /

Div:first-child {

Opacity:. 99

}

Thank you for your reading, the above is the content of "how to understand z-index in CSS attributes". After the study of this article, I believe you have a deeper understanding of how to understand z-index in CSS attributes, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.