Positioning notes in div CSS layout_html/css_WEB-ITnose

1. Relative positioning (position: relative)
Relative positioning is "relative to" the position of the element in the document flow. When using relative positioning, no matter whether the element is moved or not, the element still occupies the original space. .So moving the element will cause other boxes to be covered.
When the parent element of a relatively positioned element is absolutely positioned, and the parent element is set to visible:hidden, if it exceeds the position of the parent element, it will be relatively positioned The element is invisible.
2. Absolute positioning (position:absolute)
Absolute positioning makes the position of the element independent of the document flow, so it does not occupy space. Other elements in the ordinary document flow are laid out like absolutely positioned elements. It's the same as not existing.
If there is no parent positioning element (whether the parent element is relative or absolute), the upper right corner of the canvas will be used as the basis. If there is a parent element. The position of the parent element is used as the starting position. If the parent element has visible:hidden set, the content of the absolute element will not be visible beyond the position of the parent element.
3. Fixed positioning (position:fixed)
Fixed positioning is a subcategory of relative positioning. The difference is that the block contained by the fixed element is the viewport, which allows us to create a view that always appears at the same position in the window. A floated element that keeps it in the same position on the screen as the page scrolls.
4. Float (float:left|right)
The floating box can move left and right until its outer edge touches the edge of the containing box or another floating box. When set to a floating box, the element does not occupy the original Location.
If the containing block is too narrow to accommodate the horizontally arranged floating elements, then the other floating blocks move downward until there is enough space. If the heights of the floating elements are different, they may be blocked when they move downward. Other floating elements are "stuck"
Learn and add as you go. . This is difficult to operate