css relative positioning and absolute positioning

The relative positioning and absolute positioning of css tags are controlled through the position attribute. Relative positioning and absolute positioning do not change the size and shape of the element, but only change the position of the element.

1. The values ​​of the position attribute are as follows:
static: Default value, no positioning, elements appear in the normal flow.
absolute: Use absolute positioning to position relative to the nearest ancestor element other than static positioning. The position of the element is specified through the left, top, right and bottom attributes.
relative: Position the element relatively relative to its normal position.
fixed: Position the element absolutely, relative to the browser window. The position of the element is specified through the left, top, right and bottom attributes.
inherit: Specifies that the value of the position attribute should be inherited from the parent element.

An example without positioning:

The displayed results are as follows:

2. Relative positioning
The reference point of relative positioning is the position before the label is positioned, not relative to the parent node, sibling node, or browser.

For relatively positioned elements, the left and right attributes are used to define the horizontal offset, and the top and bottom attributes are used to define the vertical offset. left represents the distance moved to the right relative to the left outer border of the original position, right represents the distance moved left to the right outer border relative to the original position, top represents the distance moved downward relative to the upper outer border of the original position, and bottom represents the distance moved relative to the original position. The distance by which the lower outer boundary of the position is moved upward. Moreover, the offset can be a positive value or a negative value, with a negative value indicating movement in the opposite direction.

   The values ​​of the four attributes left, right, top, and bottom can be length values ​​(can be absolute units or relative units), or percentages. When using percentages, the horizontal offset is calculated based on the value of the width property of its parent element, and the vertical offset is calculated based on the value of the height property of its parent element. It should be noted that when setting the offset, if the parent element does not explicitly define the height attribute, it is equivalent to the value of the height attribute being 0.

Modify the above example and use relative positioning for div2:

The effect is as follows:

3. Absolute positioning:
Absolute positioning is positioned relative to the nearest positioned ancestor element. If there is no ancestor element, it uses the document body (browser) and moves with the page scroll; if the parent has positioning, it looks at the parent. If the parent If there is no positioning, continue to look up the parent.
Absolutely positioned elements are separated from the document flow, that is, they are deleted directly from the standard flow, so the original position of the element will be occupied.
Modify the above example (no parent node):

The effect is as follows:

Another example (the parent node has positioning):
When not using absolute positioning:

The effect is as follows:

Use absolute positioning:

The effect is as follows:

Related Posts

Teach you step by step how to install VSCode (with illustrated steps)

Commonly used selectors in CSS

Solve vue multi-level routing cache failure Solve the multi-level routing cache problem based on keep-alive vue keep-alive cache failure vue-element-admin multi-level routing cache failure

Implement drag and drop sorting in vue

Production of HTML website navigation bar

CSS simple image centering

DOM —— Delete node

Ajax Advanced Chapter 02—Cross-domain and JSONP

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*