Talk about the relative positioning and absolute positioning of positon

Transferred from: front-end development

Original address: http://www.javascript100.com /? P = 72

I can see that many children's shoes do not understand position. I will write an article according to my own understanding.
The article mainly involves three questions:
1. What is a document stream?
2. What is relative positioning?
3. What is absolute positioning relative?

Positong attributes

Value	Description
Static	Default value. When the position is set to static, it is always in the position given by the page stream (static elements ignore any top, bottom, left, or right declarations ).
Relative	If the position is set to relative, it can be moved to a place relative to its normal position. Therefore, "Left: 20" will move the element to the position of 20 pixels on the left of the normal position of the element.
Absolute	The element whose position is set to absolute can be located in the specified coordinate relative to the element containing it. The positions of this element can be specified by the "Left", "TOP", "right", and "bottom" attributes.
Fixed	The element whose position is set to fixed can be located in the specified coordinate relative to the browser window. The positions of this element can be specified by the "Left", "TOP", "right", and "bottom" attributes. Whether the window is rolled or not, the elements will remain in that position. Work in IE7 (strict mode ).

Position: static without positioning. It is generally used to cancel the positioning of inheritance.

Position: fixed is a very powerful positioning, which is relative to the fixed position of the window, but IE6 does not support

I mainly talk about relative and absolute positioning, that is, relative and absolute positioning.

Let's take a look at the relative positioning:

First look at the HTML code

copytext

• <Div id = "div1">
• <Div id = "div2">
• <Div id = "div3"> div3 </div>
• <Div id = "div4"> div4 </div>
• </Div>
• </Div>

<div id="div1">    <div id="div2">        <div id="div3">DIV3</div>        <div id="div4">DIV4</div>   </div></div>

CSS code:

copytext

• Body {
• Padding: 20px;
• Margin: 0px;
• }
• # Div1 {
• Border: 1px solid # ff0000;
• Padding: 20px;
• Height: 350px;
• Width: 400px;
• Z-index: 1;
• }
• # Div2 {
• Border: 1px solid # limit cc;
• Height: 300px;
• Z-index: 2;
• }
• # Div3 {
• Height: 100px;
• Background-color: #000000;
• Color: # ffffff;
• Z-index: 3;
• }
• # Div4 {
• Height: 100px;
• Background: # ff0000;
• Color: # ffffff;
• }

body{    padding:20px;    margin:0px;}#div1{    border:1px solid #FF0000;    padding:20px;    height:350px;    width:400px;    z-index:1;}#div2{    border:1px solid #0000CC;    height:300px;    z-index:2;}#div3{    height:100px;    background-color:#000000;    color:#FFFFFF;    z-index:3;}#div4{    height:100px;    background:#FF0000;    color:#FFFFFF;}

We set 20px for the body and div1 padding. The webpage is as follows:
Div1 indicates the red line, div1 indicates div2, div2 indicates the Blue Line, and div2 indicates div3 indicates the Black Block and div4 indicates the red block.

Set position: relative for div3; relative position: 20 PX above, 20 PX left

copytext

• # Div3 {
• Height: 100px;
• Background-color: #000000;
• Color: # ffffff;
• Z-index: 3;
• Position: relative;
• Top: 20px;
• Left: 20px;
• }

#div3{    height:100px;    background-color:#000000;    color:#FFFFFF;    z-index:3;    position:relative;    top:20px;    left:20px;}

In this case

At this point, div3 is 20 PX away from its original location from above and left.
Conclusion: The relative position (position: relative) is the original position of the relative element (that is, the position when the relative position is not set for this element)

Let's take a look at position: What is the relative position of absolute?
Let's take three examples to study:
Example 1:
Change position: relative of div3 to position: absolute, and change relative positioning to absolute positioning. The top and left values remain unchanged, both of which are 20px.

copytext

• # Div3 {
• Height: 100px;
• Background-color: #000000;
• Color: # ffffff;
• Z-index: 3;
• Position: absolute;
• Top: 20px;
• Left: 20px;
• }

#div3{    height:100px;    background-color:#000000;    color:#FFFFFF;    z-index:3;    position:absolute;    top:20px;    left:20px;}

In this case

After div3 is absolutely positioned, div3 is out of the Document Stream.
What is a document stream?
That is, the following object (div4) will ignore this object (div3) with the absolute positioning set above, and the following objects will be directed to the position of this object. You can see that div4, div3 has been pushed to the original location, ignoring div3. As long as the object is set to absolute positioning, the object will be detached from the document stream.

Now let's go back to the absolute positioning topic. In this case, div3 and div1 are 20 PX away from the browser window and 20 PX on the left. Does that mean absolute positioning is relative to the browser window, let's not rush to conclusions.

Example 2:
Based on the above example, add position: relative to div3's grandpa Tag div1, and set div1 as relative location.

copytext

• # Div1 {
• Border: 1px solid # ff0000;
• Padding: 20px;
• Height: 350px;
• Width: 400px;
• Z-index: 1;
• Position: relative;
• }

#div1{    border:1px solid #FF0000;    padding:20px;    height:350px;    width:400px;    z-index:1;    position:relative;}

At this time,

Now, div3 is located relative to div1, which is 20 Px to the left and above of div1;

Example 3:
Let's change a piece of code. Based on the above example, add position: relative to div2.
CSS code:

copytext

• Body {
• Padding: 20px;
• Margin: 0px;
• }
• # Div1 {
• Border: 1px solid # ff0000;
• Padding: 20px;
• Height: 350px;
• Width: 400px;
• Z-index: 1;
• Position: relative;
• }
• # Div2 {
• Border: 1px solid # limit cc;
• Height: 300px;
• Z-index: 2;
• Position: relative;
• }
• # Div3 {
• Height: 100px;
• Background-color: #000000;
• Color: # ffffff;
• Z-index: 3;
• Position: absolute;
• Top: 20px;
• Left: 20px;
• }
• # Div4 {
• Height: 100px;
• Background: # ff0000;
• Color: # ffffff;
• }

body{    padding:20px;    margin:0px;}#div1{    border:1px solid #FF0000;    padding:20px;    height:350px;    width:400px;    z-index:1;    position:relative;}#div2{    border:1px solid #0000CC;    height:300px;    z-index:2;    position:relative;}#div3{    height:100px;    background-color:#000000;    color:#FFFFFF;    z-index:3;    position:absolute;    top:20px;    left:20px;}#div4{    height:100px;    background:#FF0000;    color:#FFFFFF;}

At this time,

In this case, div3 is located relative to div2, which is located relative to its parent tag (do not think div3 is located relative to div4 now, because div3 is set to absolute positioning and is out of the Document Stream, div4 is placed at the original position of div3. Even if div4 is removed, div3 is still in the current position ).

Conclusion: The object with position: absolute is set, that is, it is not relative parent label or relative window location, but relative to containing it, it has recently set the position attribute to (fixed, relative, absolute) element of any value (note that it is contained, that is, the parent tag -- the grandfather tag -- and then up until the body tag). If its parent tag has the position attribute set, then it locates relative to the parent tag (Example 3). If the parent tag does not set the position attribute and the parent tag sets the position attribute, it locates relative to the parent tag (Example 2 ). If neither the parent tag nor the parent tag has the position attribute set, you can keep searching for the parent tag and locate the parent tag to the parent tag until the outermost TAG body is located in the browser window, then it is located relative to the window (Example 1)