CSS Study Notes 10: relative positioning, absolute positioning and fixed positioning, css Study Notes

CSS Study Notes 10: relative positioning, absolute positioning and fixed positioning, css Study Notes

The element position in the Document Stream is determined by the element position in (X) HTML. This is the most primitive normal stream, the floating CSS learning note 08 mentioned above can change the position of an element in the Document Stream. In addition, we can use the position attribute of CSS to determine the position of an element in the Document Stream again.

Position Attribute Value

• Static: the default layout of the Document Stream. Block-level elements generate a rectangular box. As part of the Document Stream, one or more row boxes are created for line elements, place it in its parent element. (Ignore the top, bottom, left, right, or z-index Statement ).
• Relative: Offset relative to the original position. The complete process is to generate an element in the static (float) mode, relative to the previous position, the moving direction and amplitude are determined by the left, right, top, and bottom attributes,Its original space is retained.
• Absolute:The element box is completely deleted from the Document StreamThe space occupied by the element in the normal Document Stream will be disabled,It's like the element does not exist.To locate the parent container (the container must be non-static. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream.
• Fixed: fixed to a certain position in the browser. The browser scroll will not change.

Static is the default layout method, which is not described here.

Relative location of relative

1 <! DOCTYPE html> 2 
 
At this time, box1 and box2 are located on the page according to the static layout. Now, box2 is located relatively.

The result is as follows: The box2 position is offset (this offset is relative to the original position of box2), and does not affect the position of box1 and box3.
 
Note that when relative positioning is used, elements still occupy the original space, regardless of whether or not they are moved. Therefore, moving an element overwrites other boxes.
Absolute location of absolute
Absolute positioning makes the element position irrelevant to the Document Stream, so it does not occupy space. This is different from relative positioning. Relative positioning is actually considered as part of the normal stream positioning model, because the position of an element is relative to its position in the normal stream.
1 <! DOCTYPE html> 2 

Now add a location attribute to the parent.

The effect is as follows. We can see that the location of the child has changed.

From the above phenomenon, we can conclude that the position of the absolutely located element is relative to the most recent located ancestor element. If the element does not have the located ancestor element, then its position is relative to the initial contained block (in this example, the body element and parent ).
Two conditions are required for absolute positioning.
1. The positioning attribute must be added to the parent element. It is generally recommended to use position: relative.
2. Add absolute position: absolute to the child element, and add a direction attribute (left, right, top, and bottom attributes)
Fixed Positioning
Similar to absolute positioning, its relative moving coordinates are the view (webpage window in the screen) itself. Because the view itself is fixed, it does not change with the scroll bar of the browser window, unless you move the position of the browser window on the screen, or change the display size of the browser window, therefore, fixed positioning elements are always located at a certain position in the browser window and will not be affected by the flow of documents.
1 <! DOCTYPE html> 2 
The effect is as follows. Back to the top, the div is always in the same position, and the fixed position is also used on the blog page.
 
Summary
Absolute positioning is performed based on the parent element as the reference point. It is out of the Document Stream and does not occupy space in the original position.
The relative positioning is based on its own reference point. It leaves the original location, but it still occupies space in the original location.
Fixed positioning is positioned based on the browser window as the reference point. It is always in one position and will not move