1. Location:
Positioning: set the box in a certain position, place and move the box.
Position = position mode + edge offset
(1) Relative (2) absolute (3) Fixed (4)
Top: left: bottom: right:
2. Static positioning:
The standard flow.
3. How do you do?
Moving relative to itself, moving in its original position.
Unlike floating, relative positioning does not leave the standard flow, the original position continues to occupy. Does not affect the movement of other boxes.
4. Absolute positioning:
Move relative to the ancestor element.
If there is no ancestor or the ancestor is not located (non-static location is ok), the browser prevails. If the parent box is not located, the browser prevails.
If the parent box has a location, the nearest parent box with a location is used as a reference.
!!!!! Absolute positioning no longer occupies the original position!!
5. The child is in absolute position, the father is in relative position.
Absolute positioning of children: they do not occupy the position and can be placed anywhere in the parent box without affecting other sibling boxes.
The parent box needs to be positioned within the child box: the parent box needs to use relative positioning. Because you need to occupy space.
6. Fixed position
The browser visual window prevails.
Independent of the parent element, does not follow the scroll bar.
Does not occupy the original position (off scale, special absolute position)
Fixed on the right side of the type center
Position: fixed; Left: 50%; Margin-left: margin-left; margin-left: margin-left; margin-left: margin-left; // Go half the distanceCopy the code7. Sticky positioning
A mixture of relative and fixed positioning.
You must add one of top, left, right, or bottom to take the original position (relative positioning) in reference to the browser’s visual window.
Use with page rolling collocation, poor compatibility, IE does not support.
8. Positioning summary:
Whether off – scale, thought who quasi – base move.
The son is absolute relative to the father.