Seventh day orientation
relative positioning
Features
- not out of the flow of the document
- Relatively positioned levels are larger than other levels (overlays other elements)
- When a location change occurs, the original location is still occupied
- The reference is oneself
- Use as a reference for determining positioning
- When the left and right values are set at the same time, the left value takes effect, and when the top and bottom values are set at the same time, the top value takes effect
The following two points are commonly used in relative positioning
- When relative positioning changes its position without affecting other elements, you can use relative positioning
- Use absolute positioning as a reference
absolute positioning
Features
- out of document flow
- When no reference is set, the reference is body
- When setting the reference object, the following two conditions need to be met:
- This reference must be an absolutely positioned parent element
- This parent element must have positioning attributes (relative, absolute, fixed)
- When absolute positioning this property sets the width and height to 100%, it inherits the width and height of the reference object
- When the absolute positioning element does not set the four direction values, there are other sibling elements in front of the absolutely positioned element, which will be arranged behind the same level element by default.
- When the width and height are not set, the width and height are determined by the content
- When the left and right values are set at the same time, the left value takes effect, and when the top and bottom values are set at the same time, the top value takes effect
Fixed positioning
Features
- Browser visible window when referencing object
- When the width and height are not set, the width and height are determined by the content
Fixed positioning is generally used in the sidebar of the website, back to the top structure
<
a
href=
"#"
>back to top<
a
>
When the value of the href tag attribute is empty or a
"#"
, there is a return to the top
Change the z-index of the positioning hierarchy
- When multiple elements are in the same level relationship, set the z-index value of whoever wants to be on it
- When the positioned parent element also sets the z-index value, the comparison of the child element with the parent element does not take effect
When setting the positioning, if you do not give it top, left, bottom, right values, they will appear in the position where they will appear in the document flow