HTML position (static | absolute | fixed | relative) Positioning

Syntax:
Position:Static|Absolute|Fixed|Relative

Parameters:
Static:No special location. The object follows the default HTML location rule.
Absolute:Absolute positioning. Drag an object out of the Document Stream and use left, right, top, bottom, and other attributes for absolute positioning. Its stack is defined by the Z-index attribute. At this time, the object does not have margins, but still has padding and border. Offset relative to the last parent element of the non-static value of the position attribute. If the parent element is static (Document Stream), offset relative to the entire document. After the offset, the original space will be occupied by other elements
Relative:Relative positioning. Objects cannot be located on the same level but can be moved to the original object position in the normal Document Stream Based on the left, right, top, bottom, and other attributes. The original position will be squeezed out by other elements.

Positon	Name	(1) Whether to detach an object from the Document Stream	(2) offset reference object	Offset Property	(3) whether the original position will be occupied by other elements	(4) Can I cascade through Z-index?
Absolute	Absolute Positioning	Yes	Offset relative to the last parent element of the non-static value of the position attribute. If the parent element is static (Document Stream), offset relative to the entire document (that is, the coordinate origin in the upper left corner of the body)	Left, right, top, bottom	Yes	Yes
Relative	Relative positioning	No	Offset by reference to its initial position	Left, right, top, bottom	Yes	No

Fixed:Ie5.5 and ns6 do not yet support this attribute. The elements can be fixed on the screen. The drop-down scroll bar and position remain unchanged.

Knowledge POint Description:

(1) Document Stream is the position occupied by objects in the document during arrangement,When the browser parses HTML, the elements are placed in the corresponding position in the order from top to bottom. For example, Div and P occupy the Document Stream. They are block-level elements (Block-level elements occupy a row regardless of whether width is full of the webpage width ), in the document stream, the DIV and P are displayed from top to bottom.

Example 1:

View code

<Div style = "width: 300px; Height: 100px; Border: 1px solid red"> I am a div tag </div> <P style = "width: 300px; height: 100px; Border: 1px solid red "> I am a p tag </P>

 

If you want to remove the DIV position from the Document Stream offset, you can split the DIV from the Document Stream during parsing, and offset it to 400px from the origin point in the upper left corner to put P in the Document Stream, if it occupies the original position of the DIV, you can use absolute positioning.

Example 2:

View code

<Div style = "width: 300px; Height: 100px; Border: 1px solid red; position: absolute; left: 400px "> I am a div tag </div> <P style =" width: 300px; Height: 100px; Border: 1px solid red "> I am a p tag </P>

 

 

At this time, we can see that after the absolute positioning, div deviated from the document stream, not from top to bottom, but offset the DIV, P tag occupies the original document stream position.

(2) offset reference object:

The offset referenced by absolute positioning is the last position non-static parent tag.

Example 3:

View code

<Div style = "width: 900px; Height: 100px; Border: 1px solid black; position: absolute; left: 100px"> I am a big Div, And I offset 100px to the right based on the body, the small Div must be offset <Div style = "width: 300px; Height: 100px; Border: 1px solid red; position: absolute; left: 400px "> I am a div label </div> <P style =" width: 300px; Height: 100px; Border: 1px solid red "> I am a p tag </P> </div>

 

Large divposition is not static (the default value is static), which can be absolute, relative, and small Div.

Example 4:

If all the parent labels are static, find a non-static parent label at the upper level until the body is found. If the parent level is static (Document Stream), the offset is relative to the entire document (that is, the coordinate origin in the upper left corner of the body)

For ease of display, first place a placeholder. </BR>
For ease of display, first place a placeholder. </BR>
For ease of display, place a placeholder in Dongdong, which occupies about 60 PX. </BR>

View code

<Div style = "width: 900px; Height: 100px; Border: 1px solid black;"> I am a large Div, but I am static, the small Div has to locate <Div style = "width: 300px; Height: 100px; Border: 1px solid red; position: absolute; top: 100px; based on the body; "> I am a div tag, and offset 100px down based on the body. </div>

 

Relative positioning of relative is the initial position of the reference object.

Example 5:

View code

For ease of display, place a placeholder first. </BR> for ease of display, place a placeholder first. </BR> for ease of display, place a placeholder first. It takes about 60 PX. </br> <Div style = "width: 300px; Height: 100px; Border: 1px solid red;"> I am a div label. The default value is static, not located </div>

 

Example 6,

View code

<Div style = "width: 300px; Height: 100px; Border: 1px solid red; position: relative; top: 100px"> I am a div label, relative positioning, offset 100px downward based on the initial position </div>

 

(3) whether the original position will be occupied by other elements:

After absolute or relative positioning, the original position will be occupied by other elements, as shown in example 2.

(4) Whether to cascade through Z-index:

Absolutely positioned layers can be stacked.

Example 7,

View code

<Div style = "width: 300px; Height: 100px; Background: red; position: absolute;"> I am div1, absolutely positioned, without setting Z-index, although the height is the same as that of div2, div2 will overwrite mE </div> <Div style = "width: 300px; Height: 100px; position: absolute; top: 50px; Background: yellow "> I am div2, absolutely positioned. I can overwrite div2 </div>

 

 

Example 8,

<Div style = "width: 300px; Height: 100px; Background: red; position: absolute; Z-index: 2"> I'm div1, my Z-index is higher than div2, So I overwrite div2 </div> <Div style = "width: 300px; Height: 100px; position: absolute; top: 50px; Background: yellow "> I am div2, and my Z-index is the default value, which is lower than div1 </div>