Css (display, float, position), floatposition
Display is used to set the display mode of elements.
Display: block | none | inline-block
Inline: Specifies the object as an inline element.
Block: Specifies the object as a block element.
Inline-block: Specifies the object as an inline block element.
None: hidden object
Float control element floating display
Float: none | left | right
None: Set the object to not float
Left: sets the object to float on the left.
Right: sets the object to float on the right.
Floating purpose:
It is to break the default display rules of the Document Stream. If you want to display the elements according to our layout requirements. In this case, we need to use the float attribute
Clear floating
Clear: none | left | right | both
None: default value. Allow floating objects on both sides
Left: Float objects on the left are not allowed.
Right: Float objects on the right are not allowed.
Both: Float objects are not allowed.
Position object locating method
Position: static | absolute | fixed | relative
Static: default value. No location, the object follows the regular flow. At this time, the four positioning offset attributes will not be applied
Relative: relative positioning. The object follows the regular stream and uses the top, right, bottom, the offset of the four left positioning offset attributes does not affect any elements in the regular stream.
Absolute: absolute positioning. The object is out of the conventional stream. At this time, the offset attribute refers to the ancestor element closest to itself. If no ancestor element is located, it will be traced back to the body element. The offset position of the box does not affect any elements in the regular stream, and its margin is not folded with any other margin.
Fixed: fixed positioning, consistent with absolute, but the offset positioning is based on the window. When a scroll bar appears, the object does not scroll
Absolute description:
Example: div {position: absolute; left: 100px; top: 100px ;}
Relative description:
Example: div {position: relative; left: 100px; top: 100px ;}
Fixed description:
Fixed positioning is actually a special form of absolute positioning. Fixed positioning elements are fixed relative to browser windows, rather than containing elements, even if the page is rolled, they will still be exactly the same as they used to be in the browser window.
Example: div {position: fixed; right: 0; bottom: 0 ;}
Cascade order of z-index objects
Z-index: auto | number
When an element overlaps, you can set the order of its stack through the z-index attribute.
Objects with a larger number value will overwrite objects with a smaller number value.