Absolute positioning (Absolute positioning)

Absolute positioning (Absolute positioning)

Before introducing the positioning system, we have simply introduced the absolute positioning and fixed positioning. In general, these two positioned elements, in the 3D visualization model, are above the floating element, or more than the floating element in the top 1.

Reference element

The reference to the absolute positioning (Absolute positioning) element positioning is its containing block, which is positioned relative to its containing block 2, not necessarily its parent element.

Example code:

<div style= "position:relative; width:300px; height:300px;  border:5px solid red; " >    <div style= "width:100px; height:100px; "></div>    <div style=" margin:0 0 0 100px; width:200px; height:200px; ">        <div style="top:100px; width:100px; height:100px; ">        </div>    </div></div> 

：

Absolutely positioned elements completely out of regular flow

The absolute positioning element is completely out of regular flow 3 (no effect on the successor sibling node).

A box in a regular flow is on the same layer, and a floating box is a special layer on top of a regular flow that can affect the positioning of a box in a regular flow. But the absolutely positioned box does not, each absolutely positioned box can be considered as a separate layer, without affecting the positioning of the other layers. This is related to cascading levels and cascading context 1.

It is important to note that the top and left values of absolute element positioning are related to the position of the absolute element in the regular stream before it is detached from the regular flow.

<div style= "position:absolute; width:100px; height:100px; "> Absolute</div><div style=" height:50px; BORDER:1PX solid blue; width:200px; " Ordinary text elements in >div </div><div style= "Position:absolute; left:60px; width:100px; height:100px; "> Absolute</div> 

：

The DIV in the middle of the two absolute position box affects the position of the absolute positioned element behind it in the regular flow, but is not affected by the absolute position box in front of it.

The containing block generated by the absolute positioning box

An absolute position box generates a new containing block for its regular stream child elements and positioned child elements (elements that do not contain fiexed positioning). However, the contents of an absolutely positioned element are not arranged around other boxes.

Cascade level

The absolute positioning box may obscure the contents of another box or be obscured by another box, depending on the Cascade level 1 of the overlapping boxes.

Note:

1. For information on the Cascade level and cascading context of elements, see: w3help-kb013: Hierarchical display (layered presentation)
2. For the decision to include blocks, see: w3help-kb008: Include blocks (containing block)
3. For general flow, see: W3help-kb009:css Positioning System Overview

Stationary positioning (fixed positioning)

Fixed positioning is a subclass of absolute positioning. The only difference is that for a fixed position box, its containing block is created by the Visual window (VIEWPORT1). For continuous media, the fixed position box does not move as the document scrolls. In this sense, they are similar to fixed background graphics. For page media, the Fixed positioning box repeats on each page. This method is useful when you need to place a signature at the bottom of each page.

Note that fixed positioning positioning is not supported in IE6, and the usual practice is to use absolute positioning instead, and use Javascript scripts to control the position of the absolute position box so that it changes accordingly as the page scrolls.

The following example code is an example of modifying a fixed positioning layout used by the official website:

<! DOCTYPE Html>position:fixed;        width:100%;        height:15%;        top:0;        right:0;        Bottom:auto;    left:0;        } #sidebar { position:fixed;        Width:10em;        Height:auto;        top:15%;        Right:auto;        bottom:100px;    left:0;        } #main { position:fixed;        Width:auto;        Height:auto;        top:15%;        right:0;        bottom:100px;    Left:10em;        } #footer { position:fixed;        width:100%;        height:100px;        Top:auto;        right:0;        bottom:0;    left:0; } </style> 

：

Regardless of scrolling the page, the layout area is always in the visible window.

Absolute Positioning (Absolute positioning)