1. Natural layout
The layout without any decoration is automatically left.
2. Flow layout
What’s mentioned above float:left What’s going on.
3. Positioning layout
Both relative positioning and absolute positioning are relative to the parent div tag.
Relative — take the position of this element as the reference point
Absolute — take the origin (upper left corner) of the parent div label as the reference point.
Because the outer layer is position:relative So if the inner layer is absolute, it will be aligned with the upper left corner of the outer layer as the displacement reference. Of course, I only write position:relative , write the two values of left and top, which means to align left and top with the original position of this element as the layout reference origin.
In another case, it’s just one position:absolute; There is no outer layer position:relative What point would you look for for for reference? At this time, the principle is: if there is a relative in a parent element, then a parent element will be used as the reference origin; if there is no relative, the reference origin will be the parent element position:relative , the body is taken as the reference origin. If position:absolute When the outer layer is not relative, there is no difference between the two layouts.
Of course, the last case is: the outer layer is: position:absolute; It’s inside position:relative What would that be? According to the original principle, absolute will refer to the body as the layout origin, and relative will refer to the position where it should be. In this case, it is actually referring to the upper left corner of the outer layer as the layout origin.
The rest depends on the actual situation.