Three ways of html css layout (natural layout/fluid layout/positioned layout)_HTML/Xhtml_Web page production

1. Natural layout
A layout without any modification is automatically left.
2. Fluid layout
The situation of float:left mentioned above.
3. Positioning layout
Both relative positioning and absolute positioning are relative to the parent div tag.
Relative------take the original position of this element as the reference point
Absolute--take the origin (upper left corner) of the parent div tag as the reference point.

Since the outer layer is position:relative, if the inner layer is absolute, the upper left corner of the outer layer will be aligned as the displacement reference. Of course, only position: relative is written in the outer layer, and the two values ​​​​of left and top are written, which means that the original position of this element is used as the layout reference origin for left and top alignment.

Another situation is that there is just a position:absolute; there is no position:relative in the outer layer. In this case, which point will be found as a reference? The principle at this time is: if there is a relative in a parent element, the parent element will be used as the reference origin. If there is no position:relative, the body will be used as the reference origin. If there is no relative in the outer layer of position:absolute, there is no difference between the two layouts.

Of course the last situation is: the outer layer is: position:absolute; the inner layer is position:relative, what will happen? According to the original principle, absolute will refer to the body as the layout origin, and relative will refer to its original position as the layout origin. At this time, it actually refers to the upper left corner of the outer layer as the layout origin.
Others will depend on the actual situation.