CSS positioning
position: element positioning method, values are static, fixed, relative, absolute
static: static positioning (default state, not positioned).
Fixed: Fixed positioning.
Relative: Relative positioning.
Absolute: Absolute positioning.
Positioning method should be used in conjunction with positioning attributes
Positioning coordinates: Specify the distance by which the positioned element is offset from the target element.
left: positioning element, distance from the left side of the target element.
top: positioning element, distance from the top of the target element.
right: positioning element, distance from the right side of the target element.
bottom: positioning element, distance from the bottom of the target element.
##Fixed positioning, position: fixed
- Fixed positioning is relative to the browser window.
- Fixed positioning, does not occupy space, and has a higher level than ordinary elements. It doesn't scroll as the web page scrolls.
- If no positioning coordinates are specified, the position of the fixed positioning element will remain in place.
- Fixed positioning element must be a "block element", no matter what element it is.
Relative positioning, position:relative;
- Relative positioning, is relative to " "original self" to position yourself.
- Relative positioning still takes up space and has a higher level than ordinary elements.
- If no positioning coordinates are specified, the position of the relatively positioned element will remain in place.
- With relative positioning, if it is an inline element originally, it will still be an inline element after positioning; if it is a block element originally, it will still be a block element after positioning.
Note: Relative positioning and absolute positioning are generally used together.
Absolute positioning, position:absolute
- Position the element relative to its ancestors (relative positioning, absolute positioning) to perform positioning.
- #If its parent element does not have any positioning, look for the positioning element upwards.
- If no positioning element is found even though <body> is found, then positioning will be performed relative to <body>.
- #Absolutely positioned elements take up no space and have a higher level than ordinary elements.
If no positioning coordinates are specified, the position of the absolutely positioned element will remain in place.
Absolutely positioned element is a "block element".
Next Section