Positioning of CSS Design guidelines

The original: CSS Design guide positioning

The core of the CSS layout is the Position property, which applies this property to the element box and can be repositioned relative to its position in the regular document flow. The position attribute has 4 values: static, relative, absolute, fixed. The default value is static.

I. Positioning type

1. Static positioning of the static

In the case of static positioning, each element is in the regular document flow. They are all block-level elements, so they stack up from top to right in the page.

2. Relative positioning

Where is the position relative to where it was originally located in the document flow (or the default location)?

Note that there is no change in the page except that the element has moved a certain position relative to the original position. The original space occupied by this element is not moving.

3. Absolute positioning

Absolute positioning with static positioning and relative positioning ratio, absolutely different. because absolute positioning takes the elements out of the flow of the document completely, the space occupied will be "recycled".

As you can see, absolutely positioned elements are completely detached from the regular document flow, which is now relative to the top-level element body in position. This naturally leads to an important concept of positioning: positioning the context.

As for the positioning context, it should be clear that the default positioning context for an absolutely positioned element is the BODY element. more information about locating the context is explained next.

4. Fixed positioning

Fixed positioning is similar to absolute positioning from the point of view of completely out-of-document flow. But the difference is that the positioning context of a fixed location is a window (the screen of a browser window or handheld device), so it does not scroll with the page scrolling. The most common use of fixed positioning is to create navigation elements that do not scroll with the page scrolling.

Two. Positioning the context

When it comes to absolute positioning, we understand that the default positioning context for an absolutely positioned element is the BODY element, because the body is the only ancestor element of all elements in the tag. In fact, all ancestor elements of an absolutely positioned element can be its location context, as long as the position of the corresponding ancestor element is set to relative .

As shown, it may be strange to see why the top and left properties of the inner element do not work. The reason is that the internal and external div is statically positioned by default, and there is no problem with who is locating the context. The top, right, bottom, and left properties of this element will only work if the element's position property is set to relative, absolute, and fixed.

As shown, after setting the position property of the internal div to absolute, the internal div is detached from its original position and is repositioned relative to the body by default.

As shown, after setting the position property of the external div to the relative value, it becomes the positioning context of the internal Div. The top and left properties of the internal Div refer to the external div at this point. If you re-position the external div with the left and top properties, the inner Div will move the same distance to preserve its position with the external div.

In fact, as long as the outer and inner margins of the elements are set, in most cases only the default static positioning is sufficient to achieve the layout of the page. Many beginners (include myself) who have just touched CSS will mistakenly set the Position property, and eventually find that the elements removed from the document flow are difficult to control. Therefore, do not modify the default position property of an element unless you really need to do so.

The above is what I know about positioning knowledge, the shortcomings of the welcome to correct, because I am also in the study of communication.

Positioning of CSS Design guidelines