Locate and z-index, locate z-index
Positioning
Location used to control the element
The positioning keyword is position and position has four values: relative, absolute, static, and fixed. After the element is located, the element has four values available: left, right, top, bottom.
I will use the following examples to demonstrate the absolute location of absolute and relative location of relative.
1. I defined a main with three Divs. Some code is as follows:
# Main {
Width800Px;
Height400Px;
Background: # Ccc;
}
# Main div {
Width200Px;
Height100Px;
Display:Inline-block;
}
# Div1 {
Background:Red;
}
# Div2 {
Background:Blue;
Position:Relative;
Left: 50Px;
Top: 50Px;
}
# Div3 {
Background:Green;
}
<body>
<div id="main">
<div id="div1">a</div>
<div id="div2">b</div>
<div id="div3">c</div>
</div>
</body>
2. Then I added location to div2, as shown below:
#div2{
background: blue;
position: relative;
left: 50px;
top: 50px;
}
It can be seen that the relative positioning of relative is relative to the initial position of the element, and the space is not released.
3. Add the div2 style based on 1 as follows:
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
From this we can see that absolute is located relative to the body, and the absolute space is released.
Similarly, I will use margin-left and margin-top to show the main to PX in the lower right, instead of positioning it. Then I will position B as absolute. The Code is as follows:
#main{
width: 800px;
height: 400px;
background: #ccc;
margin-left: 100px;
margin-top: 100px;
}
#main div{
width: 200px;
height: 100px;
display: inline-block;
}
#div1{
background: red;
}
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
#div3{
background: green;
}
At this point, we can see that absolute is relative to the body, because I did not locate the main
4. Add the main style as follows on the basis of 1:
#main{
width: 800px;
height: 400px;
background: #ccc;
position: relative;
left: 50px;
top: 50px;
}
As a result, when positioning the main and adding parameters, we can see that the main is directed down with three Divs.
5. Add a style to div2 based on 4, as shown below:
#main{
width: 800px;
height: 400px;
background: #ccc;
position: relative;
left: 50px;
top: 50px;
}
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
Space will be released, but B is no longer relative to the body, but relative to main. That is to say, a child element is located and absolutely located. At this time, it is relative to the most recently located ancestor element.
Static positioning is the default value, and the elements appear in normal streams without the left, right, top, and bottom values.
The only difference between Fixed and absolute is that absolute determines its location based on the last located ancestor element, while fixed always determines the Location Based on the browser, even if the window is a rolling window, it will not move. does not occupy space.
Z-index
#main{
width: 800px;
height: 400px;
background: #ccc;
position: relative;
left: 100px;
top: 100px;
}
#main div{
width: 200px;
height: 100px;
display: inline-block;
}
#div1{
background: red;
}
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
#div3{
background: green;
}
This code and the code after running are shown in, but now I need a not to be overwritten by B on it, and I need to change its cascading relationship. At this time, the z-index is used, it controls the hierarchical relationship of positioning elements. I will translate the z-index into an index on the z axis. when I use z-index, I must add a location for the current one. Simply put, I want to locate who is there and then add z-index. default position element z-index = 0. sample Code:
#main{
width: 800px;
height: 400px;
background: #ccc;
position: relative;
left: 100px;
top: 100px;
}
#main div{
width: 200px;
height: 100px;
display: inline-block;
}
#div1{
background: red;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#div2{
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
#div3{
background: green;
}
A does not seem to be dynamic, but the z-index value is changed. It definitely positions that the element space is released, so c runs to.
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
