Use CSS to locate and css to locate

Use CSS to locate and css to locate

In CSS, there are four different positioning methods by using the position attribute, which affects the method of element box generation.

Meaning of the position property value:

Static: static location

The element box is generated normally. Block-level elements generate a rectangular box. As part of the Document Stream, one or more row boxes are created for the element in the row and placed in the parent element.

Relative: relative positioning

The element box offsets a certain distance. The element remains in the State before it is finalized, and its original space is retained.

Absolute: absolute positioning

The element box is completely deleted from the document stream and located relative to its contained block. The inclusion block may be another element in the document or an initial inclusion block. The space occupied by the element in the normal Document Stream will be closed, as if the element did not exist. 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 Positioning

The element box is similar to setting position to absolute, but its contained block is the window itself.

1. Relative positioning

Relative positioning is a very easy-to-understand concept. If an element is relatively located, it appears at its location. Then, you can set the vertical or horizontal position to move the element "relative to" its start point.

If you set top to 20px, the box is 20 pixels at the top of the original position. If left is set to 30 pixels, a 30-pixel space is created on the left of the element, that is, the element is moved to the right.

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

As shown in

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.

Ii. Absolute Positioning

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.

The layout of other elements in a normal stream is like that of an absolutely positioned element that does not exist:

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

As shown in:

Relative to the position of the absolute positioning ElementRecently located ancestor ElementIf the element does not have an ancestor element that has been located, its position is relativeInitial inclusion Block.

The main problem in positioning is to remember the meaning of each positioning. So now let's review what we have learned: relative positioning is the initial position of "relative" elements in the document, and absolute positioning is "relative" to "the recently located ancestor element, if no ancestor element has been located, the initial inclusion block is "relative.

Note: depending on the user agent, the initial inclusion block may be a canvas or HTML element.

Tip: Because the absolute positioning boxes are irrelevant to the Document Stream, they can overwrite other elements on the page. You can set the z-index attribute to control the stacking order of these boxes.

Iii. Fixed Positioning

Fixed positioning is similar to absolute positioning. elements are separated from the document stream, but they are not positioned relative to the container block, but relative to the view (in most cases, this view refers to the browser window ).