Deep understanding of stack z-index and cssz-index in CSS positioning
* Directory [1] define [2] stack rules [3] stack context [4] compatible with previous words
In the end, two elements try to put them in the same position. Obviously, one of them must cover the other. However, how to control which element is placed on the upper layer introduces the z-index attribute.
Definition
Using z-index, you can change the order in which elements overlap. The name of this attribute is obtained by the coordinate system, where the X axis is from left to right and the Y axis is from top to bottom. From the screen to the user is the Z axis. In this coordinate system, elements with lower z-index values are closer to users, which causes elements with higher z-index values to overwrite other elements, this is also called stacking or stacked storage.
Z-index
Value: <integer> | auto | inherit
Initial Value: auto
Applied to: positioning Element
Inheritance: None
[Note] the use of z-index in positioning elements is a standard of CSS2. To reach the CSS3 standard, the application of z-index is extended.
[Note] All integers can be used as z-index values, including negative numbers. If a Negative z-index value is specified for the element, it will be moved farther away from the reader, and will be moved to the lower layer of the stack.
Stack rules
For CSS2.1, stack rules for page elements are shown in:
Stack rules for positioning Elements
[1] for the positioning element (position is not a static element), if the z-index or z-index are not set to the same, the subsequent element overwrites the previous element.
[2] for elements at the same level in the same stack context, the default value of z-index is smaller than that of limit.
Stack Context
Once a z-index value (not auto) is specified for an element, the element creates its own local stack context. This means that all descendants of an element have their own stacked order relative to the ancestor element.
[Note] the auto value indicates that the stack hierarchy generated in the current stack context is the same as that of its parent box. This box does not create a new local stacked context. Z-index: auto and z-index: 0 are equal, but z-index: 0 creates a new local stack context.
Default Style
<div class="box1"> <ul class="list1"> <li id="one">1</li> <li id="two">2</li> <li id="three">3</li> <li id="four">4</li> </ul> <ul class="list2"> <li id="five">5</li> <li id="six">6</li> </ul> </div><div class="box2"> <div id="seven">7</div> <div id="eight">8</div></div>
.box1{z-index: 1;}.box2{z-index: auto;}.list1{z-index: 2;}.list2{z-index: 1;}#one{z-index: -1;}#two{z-index: 1;}#three{z-index: 0;}#four{z-index: auto;}#five{z-index: 2;}#six{z-index: 1;}#seven{z-index: 2;}#eight{z-index: -1;}
// Stack sequence. box1 1. box1. list1 1, 2. box1. list1 # one 1, 2,-1. box1. list1 # two 1, 2, 1. box1. list1 # three 1, 2, 0. box1. list1 # four 1, 2, auto. box1. list2 1, 1. box1. list2 # five 1, 1, 2. box1. list2 # six 1, 1. box2 auto. box2 # seven auto, 2. box2 # eight auto,-1
[Note] auto, 2, and auto,-1 are equivalent to 2 and-1, because auto indicates that no stack context is generated. Then # seven and # eight are at the same level as their parent. box2 and. box1.
Elements are not stacked under the background of the stack context (that is, the parent z-index is located as a digital value), but can be stacked under its content. When the elements are not in the stack context, elements are not stacked under the background of the <body> element, but can be stacked under its content.
Compatible
[1] The default value of z-index in IE 7-browser is 0.
Generally, the default value of z-index is auto, while that of z-index in IE7-browser is 0, the difference between the two is IE7-the positioning element of the browser will automatically generate the stack Context
div{ position: absolute; border: 1px solid black;} .div1{ width: 300px; height: 100px; background-color: pink; z-index: 1;}.div2{ background-color: lightgreen; top: 50px; left: 50px; width: 200px; height: 200px;}.in2{ width: 100px; height: 150px; background-color: lightblue; z-index: 2; border: none;}
<div class="div1"></div><div class="div2"> <div class="in2"></div></div>
Generally, the stacking order of div1 is 1; the stacking order of div2 is auto; the stacking order of in2 is auto, and 2 is equivalent to 2. Therefore, the coverage level is in2 and the coverage level is div1. However, in IE7-browser, the stacking order of div1 is 1; the stacking order of div2 is 0; and the stacking order of in2 is 0, 2. Therefore, the coverage layer is div1, and in2 is used to overwrite div2.
Other browser icons on the left and IE7 browser icons on the right
[2] A weird bug in IE 6-browser about z-index
When an element is floating and not a positioning element (position is not static), the element parent level is relative, in IE6-browser, no matter how the element's parent z-index is set
.div1{ position: absolute; z-index: 1; width: 100px; height: 100px; background-color: pink;}.box{ position: relative; z-index:2;}.div2{ float: left; width: 150px; height: 50px; background-color: lightgreen;}
<div class="div1"></div><div class="box"> <div class="div2"></div> </div>
On the left is the result of IE 6 browser, and on the right is the result of other browsers.
Solution
[1] removing floating Elements
[2] changing relative positioning of parent-level elements to absolute positioning
[3] adding the position attribute to an element (except static)
Any of the above three methods can be used. In fact, they are destroying the conditions for the establishment of a bug.
[3] The select z-index in IE6-browser is invalid and the div is blocked.
In IE6-browser, the select setting of z-index is invalid and will be stacked on div by default.
.box{ left: 30px; z-index:2; position: absolute; width: 100px; height: 100px; background-color: pink;}select{ width: 100px; position: absolute; z-index:1;}
<Div class = "box"> </div> <select name = "select" id = "slt1"> <option value = "1"> Item 1 </option> <option value = "2"> option 2 </option> </select>
On the left is the result of IE 6 browser, and on the right is the result of other browsers.
Solution
In IE6-browser, although div cannot overwrite select, iframe can select. Therefore, you can set an iframe with the same width and height as the div. Make div overwrite iframe, iframe overwrite select, and finally achieve the effect that select is overwritten by div
iframe{ left: 30px; position: absolute; width: 100px; height: 100px; z-index: 2;}
<Iframe src = "#" frameborder = "0"> </iframe> <div class = "box"> </div> <select name = "select" id = "slt1 "> <option value =" 1 "> Item 1 </option> <option value =" 2 "> Item 2 </option> </select>
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
