DC10 control page layout with CSS positioning

CSS Positioning control page layout

Position

Static (statically positioned, default value)

Absolute (absolute positioning)

Out of the document stream, positioned according to the reference object

Relative (relative positioning)

Without leaving the document flow, the reference is the original location

Fixed (stationary positioning)

A special form of absolute positioning, a reference to a browser window

When no width (height) is defined, it can be defined by left right (top bottom)

Locating references

Reference

Window border (default)

Include Block

Include block as anchor element

Their own

Coordinate values

Absolute

Top

Top edge outer wall to inner wall containing block top

Right

Right outer wall to inner wall containing block right

Bottom

Bottom outer wall to inner wall containing block

Left

Left outer wall to the left inner wall of the containing block

Note: The outer wall represents the inner edge of the inner margin.

Relative

Top

Top Edge outer wall to original position top edge outer wall

Right

Right outer wall to the right outer wall of the original position

Bottom

Outer wall of Bottom edge to original position

Left

Left outer wall to left outer wall of original position

Particularity

Absolute

When top right bottom left is not explicitly set, the document stream is not detached, but its size does not affect the containing block

Still affected by the inclusion block position

Only when the left/top is set separately, only the orientation capability of that direction

Positioning Cascade

Z-index

Only affects elements of the absolute relative fixed property

When null/0, remove properties from

Set to negative to hide positioned elements below the document flow object

The anchor element is displayed by default on the document flow object

DC10 control page layout with CSS positioning