Position in CSS and common application implementations

In the development of the web foreground, we will use the postion attribute for the layout positioning.
Today summed up the position knowledge points, and commonly used functions to share with you, welcome everyone to communicate correct.

First, we explain the properties of the postion.

In CSS3, this is what postion describes.

Summarized as follows:
Static is the default layout, set Top\left. property does not work.
Relative is the relative layout, set by Top\left. Relative to the control in the file.
Absolute is absolutely positioned to set the 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 location of the browser window.

In addition, after my Code test:
1. If Top\left. Where a property is defaulted, the position 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, relative to the closest parent control, not the closest parent control on the same layer. Next is the sibling control.
3.static has no effect on other covering layers.

Then we can prove the above conclusion through the code:

Scenario 1

Html:

<DivID= "Zero">            <DivID= "One">One</Div>            <DivID= "both">Both</Div>            <DivID= "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.

Scenario 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:

<DivID= "First">            <DivID= "Second">                <DivID= "Thrid"></Div>            </Div>        </Div>

:

As you can see, when relative is positioned relative to the most recent parent control, not the parent control of the same layer.

Scenario 3: If there is no parent div:

Html

<id= "Out"></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; }

:

In this case, it is shown that if there is no parent control, then relative positioning is a control relative to the sibling relationship.

Description of Z-index in CSS3

Common applications in position development

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

1, 3 is simpler, with simple settings position=fixed, and top Left,z-index can be achieved, here do not explain

Scenario 2:

By invoking the JS function to determine where the scrollbar is located, the position is set to fix the navigation bar position when it exceeds the height of the top of the navigation bar, otherwise the properties position static,maring are unchanged.

Js:

varMT = 0; Window.onload=function () {            varMydiv = document.getElementById ("mydiv"); varMT =Mydiv.offsettop; Window.onscroll=function () {                vart = 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:

<Divclass= "nav auto mydiv"ID= "Mydiv"style= "Z-index:2;">        <ulID= "Ulnav">          <Li><ahref="#">Home</a></Li>          <Li><ahref= "classes.html">Class settings</a></Li>          <Li><ahref= "achievment.html"rel= "nofollow"Target= "_blank">Teaching Results</a></Li>          <Li><ahref= "techenviroment.html"Target= "_blank">Teaching environment</a></Li>          <Li><ahref= "specialcourse.html"Target= "_blank">Featured Courses</a></Li>          <Li><ahref= "teacherteam.html"Target= "_blank">Teacher Team</a></Li>          <Li><ahref= "contact.html"Target= "_blank">Contact information</a></Li>          <Li></Li>        </ul>        </Div>

Set the appropriate CSS to control the style you want.

:

Position in CSS and common application implementations