positioning layout)

1. Natural layout <br />The layout without any modification is automatically aligned to the left.
2. Fluid layout <br />The situation of float:left mentioned above.
3. Positioning layout <br />Relative positioning and absolute positioning are both relative to the parent div tag.
Relative - Use the original position of the element as the reference point. Absolute - Use 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, it will be aligned with the upper left corner of the outer layer as the displacement reference. Of course, the outer layer only writes position:relative, and writes the two values left and top, which means: the position where this element should be originally located is used as the layout reference origin for left and top alignment.

There is another situation where there is only one position:absolute; there is no position:relative on the outer layer. Which point will be used as a reference at this time? The principle at this time is: if there is a relative element in a parent element, the parent element is used as the reference origin; if there is no position:relative, the body is used as the reference origin. If there is no relative outer layer of position:absolute, there is no difference between the two layouts.

Of course, the last case is: the outer layer is: position: absolute; the inner layer is position: relative, what will happen then? 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 as the layout origin. At this time, it actually refers to the upper left corner of the outer layer as the layout origin.
The rest depends on the actual situation.

<<: Detailed explanation of how to pass values between react hooks components (using ts)

>>: How to choose transaction isolation level in MySQL project