Positioning
The composition of
positioning Positioning = Positioning mode + Edge offset
Positioning mode
The positioning mode syntax of an element defined by the position attribute is as follows:
Selector {position: Property Value;}
1
positioning mode is different categories, under different circumstances, different positioning modes use
value semantics
static static positioning
relative positioning relative
absolute absolute positioning
fixed fixed positioning
edge offset
side partial Shift attribute example description
top top: 80px top offset, which defines the distance of the element relative to the upper line of its parent element
bottom bottom: 80px bottom offset, defines the distance of the element relative to the upper line of its parent element
left left: 80px left end Offset, defines the distance of the element relative to the upper line of its parent element
right right: 80px right end offset, defines the distance of the element relative to the upper line of its parent element.
Fixed positioning
No position at all;
only the viewable window of the browser The visual window of the browser + edge offset property to set the position of the element
does not scroll with the scroll bar.
Syntax
position: fixed;
1
Relative positioning
is offset relative to the original position. The
original position will be retained.
Syntax
position: relative;
1
Absolute positioning.
Horizontal centering.
Left: 50%
margin-left:-50% of the width.
Static positioning.
Default positioning
No edge offset,
basically not used