Three ways of html+css layout (natural layout/flow layout/positioning layout)

The layout without any modification is automatically left.

The float:left situation mentioned above.

Both relative positioning and absolute positioning are relative to the parent div tag.

Relatively ----------------------------------------------------------------------------------------------------------------------------

Absolute - Take the origin of the parent div tag (top left corner) 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, the outer layer only writes position:relative, writes the two values ​​left and top, which means that the left and top alignment is based on the original position of the element as the layout reference point.

Another situation is that it is just a position:absolute; there is no position:relative on the outer layer. At this time, which point will be found as a reference? The principle at this time is: if there is a relative in a certain parent element, the parent element is used as the reference origin, and if there is no position:relative, the body is used as the reference origin. If the position:absolute outer layer does not have relative, there is no difference in 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 the position he should be at as the layout origin. At this time, it is actually referring to the upper left corner of the outer layer as the layout origin.

The rest depends on the actual situation.