HTML Learning notes CSS style (relative positioning absolute positioning)

CSS relative positioning

Elements set to relative positioning (relative) are offset by a distance. The element still retains its pre-positioned shape, and the space he originally occupied remains

CSS relative positioning

Relative positioning is a very easy-to-grasp concept, and if an element is positioned relative to it, he will appear in her place and then be able to move the element relative to his starting point by setting a vertical or horizontal position.

If the top is set to 20px then the position of the box is at 20px below the top if left is set to 30 pixels, then a space of 30 pixels is created on the right side of the element, that is, the element is moved to the wrong.

#box_relative {  position:relative;  left:30px;  top:20px;}

Note that when using relative positioning, the element still occupies the original space, regardless of whether it is moved or not. Therefore, moving an element causes it to overwrite other boxes.

CSS Absolute Positioning

The element box set to absolute positioning is completely removed from the document. and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed. As if the original position of the element does not exist. The element is positioned to generate a block-level box regardless of what type of box was originally generated in the normal flow.

CSS Absolute Positioning

Absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space. This is different from relative positioning, where relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream.
The layout of other elements in the normal stream is like an absolutely positioned element that does not exist:

#box_relative {  position:absolute;  left:30px;  top:20px;}

Summarize:

In CSS there is a total of n positioning methods, wherein, static, Relative,absolute three ways are the most basic and most commonly used three positioning methods. Their base.
This is described below.
Static default Positioning method
Relative relative positioning, relative to the original position, but the original position is still retained
Absolute positioning, relative to the nearest non-standard Liu positioning, the original position disappeared, was replaced by the position behind

Typically, the value of our element's position property defaults to static or no positioning, and the element appears in the normal flow of the document, and the left,right,bottom,top that you set for this element are not effective and will not take effect. For example, you set a declaration that offsets 100px from the left margin: left:100px then this statement will not have any effect. There are also z-index properties that do not take effect at this point.
In other words, if we do not give an element a position attribute declaration, then it defaults to the above situation, but because of the float, so usually we do not need to set the element position property!
But in some special cases, we have to use the position attribute, so let's talk about the relative and absolute values of the Position property today.
First say relative, relative positioning.
How do you understand it? If I set a relative position on an element, then first this element will appear in the document flow like other elements, where it should appear, and then we can set its horizontal or vertical offset to move the element relative to the starting point of its position in the document flow. One thing to note is that when using relative positioning, even if the element is offset, he still occupies the space before it is offset. One thing to note here is that the offset is not a margin and is not the same as the margin.

Let's look first:

There are three floating blocks, the second block is set relative positioning position:relative, when you see its location and no other difference, with the other two blocks are in the normal flow of the document.
Next I set an offset for the block that set the position:relative: left:50px; top:30px then we look at the effect:

At this point we find that the second block has an offset to the starting point of its own position, but the space occupied by it is still in place (where the dotted box is marked), even if we set the offset a bit larger so that it completely leaves the original position, where it will still exist in the document stream. Will not be filled by the third block floating around.
At the same time, its offset does not squeeze other blocks from the original position in the document stream, and if there is overlap, it overlaps the other document flow elements, rather than squeezing them out, as shown in the figure, which is covered by the third block.
We can set its Z-index property to adjust its stacking order.

Next we'll look at absolute positioning: position:absolute

An absolutely positioned element is not occupied in the document flow, and if an element has an absolute position set, its position in the document flow is deleted, where is this element? It floats, actually setting the relative positioning relative will also let the element float up, but their difference is that the relative positioning does not delete itself in the document flow occupies the space, and absolute positioning will delete the element in the document flow position, completely from the document flow out of the, We can set their stacking order by Z-index.
So how does absolute positioning work? First, if its parent element sets a location other than static, such as position:relative, or Position:absolute and position:fixed, then it will be positioned relative to its parent element, with the position passed to the left, Top, right, the bottom property specifies that if its parent element is not positioned, then it depends on whether the parent element of the parent element has a set orientation, and if it does not continue to the ancestor elements of higher levels, In short, it is positioned relative to the first ancestor element that sets a location other than static positioning (such as position:relative), and if all ancestor elements do not have one of the above three positions, then it is positioned relative to the body of the document (not a window, Fixed with respect to window positioning)
The absolute positioning of the elements relative to who to locate, we put this "who" called the reference, we combined the above explanation to see the understanding:

Let's take a look at the effect in the browser, and let's look at the look without using absolute positioning:

Then we set the absolute positioning of the second block: Position:absolute and then set an offset: left:150px;top:40px; Then it becomes the following:

One more thing: we can set a negative value when we set the offset.

HTML Learning notes CSS style (relative positioning absolute positioning)