Detailed CSS positioning position and application scenario examples

First we explain the postion attribute.

In CSS3, that's what Postion describes.

Summarized as follows:
Static is the default layout, set Top\left ... Properties are not useful.
Relative is the relative layout, set up by the Top\left. is relative to the control in the file.
Absolute is an absolute positioning, set of Top\left. will be relative to the entire page.
Fixed is relative to the browser window positioning, set the Top/left property, is relative to the position of the browser window.

In addition, after my Code test:
1. If Top\left. One of the properties is default, and the location of the absolute,fixed layout is changed relative to the position of the parent control.
2.relative relative positioning, if there is a parent control, the relative is the closest parent control, not the closest parent control in the same layer. Next is the sibling control.
3.static has no effect on other covering layers.

Then we will prove the above conclusion by code:

Situation 1

Html:

<div id= "Zero" >
<div id= "One" >one</div>
<div id= "Two" >two</div>
<div id= "Tree" >tree</div>
</div>

Css:


#zero {
width:200px;
height:200px;
margin:100px 500px;
Background:black;

z-index:0;
}
#one {
width:100px;
height:100px;
position:relative;
top:50px;
left:20px;
background:red;
Z-index:1;
}
#two {
width:100px;
height:100px;
Position:absolute;
top:190px;

Background:yellow;
Z-index:2;
}
#tree {
width:100px;
height:100px;
position:fixed;
top:250px;
left:600px;
Background:deepskyblue;
Z-index:3;
}



Result diagram:

Here you can see that the div with ID one is the relative layout of the parent control.

Situation 2:

Css:


#first {

width:200px;
height:200px;
Background:black;
margin-top:100px;
Z-index:1;
}
#second {
margin-top:10px;
margin-left:10px;
width:150px;
height:150px;
Background:yellow;
Z-index:2;
}
#thrid {
width:100px;
height:100px;
position:relative;
background:red;
top:30px;
left:30px;
Z-index:1;
}



Html:

<div id= "a" >
<div id= "Second" >
<div id= "Thrid" ></div>
</div>
</div>

Effect Chart:

It can be seen from here that when the relative position is relative to the most recent parent control, not the same parent control.



Case 3: If there is no parent div:

Html

<div id= "Out" ></div>
<div id= "OUT1" ></div>

Css


#out {
margin-top:50px;
width:200px;
height:200px;
Background:black;
Z-index:1;
}

#out1 {
width:200px;
height:200px;
Background:yellow;
position:relative;
Z-index:3;
top:10px;
}



Effect Chart:

In this case, see if there is no parent control, then relative positioning is relative to the sibling control.

Description of Z-index in CSS3

Common applications in position development

1. Floating windows on both sides of the web (player, top button, floating ad, function button, etc.)
2. Navigation bar floating top.
3. Hide div to implement the window function (by setting div positioning and Z-index control div position and appear hidden)



1, 3 is simpler, through simple setup position=fixed, as well as top Left,z-index can be achieved, this does not explain

Situation 2:

By calling the JS function to determine the location of the scroll bar, more than the navigation bar from the top of the height of the set position for fix fixed navigation bar position, otherwise position for static,maring and other properties unchanged.

Js:


var mt = 0;
Window.onload = function () {
var mydiv = document.getElementById ("mydiv");
var mt = Mydiv.offsettop;
Window.onscroll = function () {
var t = Document.documentElement.scrollTop | | Document.body.scrollTop;
if (T > MT) {
mydiv.style.position = "fixed";
Mydiv.style.margin = "0";
Mydiv.style.top = "0";
}
else {
Mydiv.style.margin = "30px 0";
Mydiv.style.position = "Static";
}
}
}



Html:


<div class= "nav auto mydiv" id= "mydiv" style= "Z-index:2"; >
<ul id= "Ulnav" >
<li><a href= "#" > Home </a></li>
<li><a href= "classes.html" > Class settings </a></li>
<li><a href= "achievment.html" rel= "nofollow" target= "_blank" > Teaching Achievement </a></li>
<li><a href= "techenviroment.html" target= "_blank" > Teaching Environment </a></li>
<li><a href= "specialcourse.html" target= "_blank" > Featured courses </a></li>
<li><a href= "teacherteam.html" target= "_blank" > Teachers ' Team </a></li>
<li><a href= "contact.html" target= "_blank" > Contact way </a></li>
<li></li>
</ul>
</div>



Set the appropriate CSS to control the style you want.

Effect Chart: