Home > Developer > JavaScript
Deep CSS attributes (9): z-index, deep css attributes z-index
If you are not a beginner in csser, you must have a general understanding of the usage of z-index, z-index can control the stacking order of positioning elements perpendicular to the display (Z axis). This article does not describe how to use basic APIs, instead, we should have a better understanding of how z-index works, what problems are there when using z-index, and how to use z-index in daily development. The following is an example of the Code that introduces the body of today:
<style type="text/css">.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;}</style> <div><span class="red">Red box</span></div><div><span class="green">Green box</span></div><div><span class="blue">Blue box</span></div>
For example:
The above code is easy to understand. The following is a question for everyone: how to use the red span element after the green and blue elements in compliance with the following rules?
1) The html Tag cannot be changed in any way;
2) the z-index attribute of any element cannot be added or changed;
3) do not add or change the position attribute of any element;
How can we solve this problem? Why? ----------------------------------- Split line ----------------------------------------------
I. Golden law of z-index and stack context1) A box has the same stack level as its father, unless the box is assigned different stack levels through the z-index attribute;
2) the z-index attribute is applicable only to element objects whose position attributes are relative, absolute, and fixed;
3) set the opacity attribute value smaller than 1 for a positioned element, which means that a stack context is created ), just like adding a z-index value to this 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;
-> This box creates a local stack context;
5) If no z-index is specified for the box, the elements will be stacked in the following order (stacked) (from back to front ):
-> Boxes in a normal stream, based on the sequence in the source code;
-> Floating boxes;
-> After computed, the value of the display attribute is inline/inline-block/inline-table boxes;
-> Positioned boxes and boxes: Set opacity to less than 1 Based on the sequence in the source code;
Therefore, when we set a z-index for a positioned element, we do two things:
1) This element shares the same stack context with the elements before or after it, which means we change the value of z-index, the reason why the element moves the front and back of other elements.
2) create a new stack context for any element in the element. Once you create a stack context, any) any layer will stay in this stack context. Through the above golden rule, you may already know the answer to the above question. In the golden rule, we mentioned a new term "stack context". Next we will introduce it through an example:
<!DOCTYPE html>A special case is that there is no positioning in a document, and the document has only one stack environment-it is created through HTML. Next we will add the following style to the above example:
h1, p {position: relative;} h1 {z-index: 2;}p {z-index: 1;}In this case, both h1 and p create a stack context, both of which are in the stack context of the document. After adding a style, h1 is placed on the p element. What if we add the following style to the em element:
h1, p, em {position: relative;} h1 {z-index: 2;background-color: #f0f;}p {z-index: 1;background-color: #00f;line-height: 40px;}em {z-index: 1;background-color: #f00;}After this style is added, em creates a stack context. Due to the z-index attribute of em, its internal text is closer to the user than other text in the p label. Because it is inside the stack context of p, it is always lower than the text in h1. Note: If you increase the value of z-index, you cannot use em on top of h1. If you want the elements of a context to be located above the elements of another context, you must upgrade the entire context or set them to the same context. There are two solutions: solution 1:
H1, p, em {position: relative;} h1 {z-index: 2; background-color: # f0f;} p {/* raise the entire context, p and em are on top of h1 */z-index: 3; background-color: # 00f; line-height: 40px; margin-top:-40px ;} em {z-index: 1; background-color: # f00 ;}Solution 2:
h1, p, em {position: relative;} h1 {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. Create stack context and precautionsHow can I 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.
Iii. z-index problems in some browsers1) The select element in IE6 is a window control, so it always appears at the top of the stacked order without considering the natural cascade order, position attribute or z-index. You can add an iframe on the div element to set it to position: absolute, and set the z-index of the div to be higher than the iframe.
2) because the parent container (element) is located, IE6/7 will mistakenly reset its stacking context.
3) In Firefox2, a negative z-index value will place the element behind the stacking context, rather than before the element stacking context, such as the accepted background and border. At the end of this article, I have attached the answer to the question raised at the beginning of this article:
/* add this */div:first-child {opacity: .99;}Thank you for reading this article. I hope you can correct it.
Iv. Reference Links:Find out how elements stack and start using low z-index values
The Z-Index CSS Property: A Comprehensive Look
Elaborate description of Stacking Contexts
Overlapping And ZIndex
CSS/Properties/z-index
Understanding CSS z-index (MDN)
What No One Told You About Z-Index
Test Demo:
Original at: Benjamin
Link: http://www.zuojj.com/archives/904.html
If you need to reprint it, please specify the original or original address in the form of a link.
What is the specific z-index attribute in CSS?The order of the layer to the depth of the screen. You can use several layers to see its meaning.
The test code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Title> No title page </title>
</Head>
<Body>
<Div style = "position: relative; width: 150px; height: 100px; z-index: 2; background-color: Red;"> </div>
<Div style = "position: relative; width: 150px; height: 100px; z-index: 1; top:-20px; background-color: Blue;"> </div>
</Body>
</Html>
Note:
In the first DIV module, we define the width to 150, the height to 100, the background color to red, z-index: 2 inherit; The DIV level is 2
In the second DIV module, we define that the width is also 150, the height is 100, the background color is blue, z-index: 1 inherit; The DIV level is 1, top: -20px vertical up-20 pixels.
2> 1
The above DIV module level is higher than the following DIV template level. therefore, in position: relative;, we can see that the previous layer hides the next layer. and cover our set 20-pixel area.
Z-index attribute in CSS styleDefine and use the z-index attribute to set the stacking sequence of elements. Elements with a higher stacking order are always in front of elements with a lower stacking order. Note: An element can have a negative z-index attribute value. Note: Z-index can only work on positioning elements (for example, position: absolute ;)!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
