Css position: relative, absolute, relativeabsolute

Css position: relative, absolute, relativeabsolute

Position in CSS is very important in layout, and it is hard to understand a lot of information. The following is my understanding:

Syntax:

Position: Relative | absolute

Relative:

The object follows the regular flow, and its position in the regular flow is offset by the top, right, bottom, left attribute, without affecting any elements in the regular flow.

Absolute:

When an object is detached from a regular stream, it uses the top, right, bottom, left, and other attributes for absolute positioning. The offset position of the box does not affect any elements in the regular stream, and its margin does not fold with any other margin.

Note:

When position: relative is set, it is located relative to itself. (That is, it is equivalent to moving the current position)

When position: absolute is set, it is located relative to the parent level. No parent level is located relative to the body level.

Note: position: for absolute, left, right, top, and bottom must specify at least one of them. objects can be stacked and are defined using the z-index attribute.

Position: objects cannot be stacked in relative mode.

Position: relative and position: absolute in CSS are different.

Position: absolute. This is absolute positioning;
Is relative to the browser positioning.
For example, position: absolute; left: 20px; top: 80px; the container is always located at the position 20px left of the browser and 80 PX away from the browser.

Position: relative is relative positioning, which is relative to the previous container positioning. In this case, the top left cannot be used for positioning. Margin should be used.

For example: <div class = "1"> </div> <div class = "2"> </div>

When 1 is fixed. 1 style float: left; width: 100px; height: 800px;
The Style 2 is float: left; position: relative; margin-left: 20px; width: 50px;
2 is located at the right of 1, PX away

Css positioning: position: relative and absolute

If the parent element is positioned as position: absolute and the child element is positioned as position: absolute, remember to write the coordinates, then the position of the child element is also very different from that of the parent element, for example, if the parent element is position: relative, it is relative to the page, and it is placeholder. The full positioning will affect the next module, for example, a page with a width of PX, there are two element a, element A, 200 in width, 100 in height, Element B 200 in width, and 100 in height. They are in a row. However, I asked element A to locate the middle position, for example, position: relative; top: 0; left: 120px; then Element B will wrap the line, because it cannot be placed, so it will automatically switch to another line, but postion: absolute; will not occupy space, if you use position: absolute; for element A, B will start to typeset from the edge of the page and regard element A as nothing. As for the two questions you asked, first, you need to understand what relative and absolute mean. One is relative positioning, the other is absolute positioning, and the sub-element is also based on the parent element, no matter what the parent element is, the child element is located according to the starting position of the parent element.