CSS Positioning (Position)

Static positioning

The default for HTML elements, that is, no positioning, elements appear in the normal stream.

Statically positioned elements are not affected by top/bottom/left/right

Fixed positioning

The position of the element relative to the browser window is a fixed position.

Does not move even if the window is scrolled

This means that the fixed element position is relative to the browser window.

Attention:

Fixed positioning under IE7/IE8 needs to be described! DOCTYPE to support it.

Fixed positioning makes the position of an element independent of the document flow and therefore does not occupy the document flow space .

Fixed positioned elements overlap with other elements.

Relative positioning

Relative positioning elements are positioned relative to their normal positions. Such as:

Html:

<Divclass= "Panel">1</Div><Divclass= "Panel">2</Div><Divclass= "Panel">3</Div><Divclass= "Panel PL">4</Div><Divclass= "Panel">5</Div>

Css:

. panel{height:50px;border:1px dashed Red;width:200px;background-color: #ccc;}. pl{position:relative;left:100px;//relative to the original position to the right 100pxtop:30px;//relative to the original position downward 30pxbackground-color: #808080;}

Effect

It is important to note that the elements that define the relative are still occupied by the original space, and the elements overlap above other elements after the definition relative.

Relative positioning elements are often used as container blocks for absolutely positioned elements

Absolute positioning

The position of an absolutely positioned element is relative to the nearest parent element, if the element has no positioned parent element, then its position is relative to the

Absoulte positioning makes the position of an element independent of the document flow, so it does not occupy space and can overlap other elements

CSS Positioning (Position)