Three methods of html + css layout

1. Natural layout. The layout without any modification is automatically left-aligned. 2. float: left in the above section of the flow layout. 3. relative and absolute positioning of the positioning layout are relative to the parent div label. Relative ------ take the original 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, if the inner layer is absolute, the upper left corner of the outer layer is aligned with the displacement reference. Of course, the outer layer only writes position: relative, and the left and top values, which indicates to use the left and top alignment with reference to the origin position where the element should have been originally located. Another case is that there is only a position: absolute; the outer layer does not have a position: relative. What kind of point will it look for reference? The principle at this time is: if a parent element contains relative, the reference origin is a parent element. If there is no position: relative, the reference origin is body. If the position: absolute outer layer does not have relative, there is no difference between the two la S. Of course, the last case is: position: absolute; position: relative in it. 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 where he should have been in the layout origin. At this time, it is actually referring to the layout origin in the upper left corner of the outer layer. Others depend on the actual situation.