On the position positioning problem of CSS

For beginners, the position positioning problem of CSS is more common. Before I don't know postion positioning is how, typesetting has been crooked, always row bad

The positioning of CSS is generally divided into four types:

position:static;

position:relative;

Position:absolute;

position:fixed;

which

1. Static is the default property, and the system is automatically set to the static property when the Position property is not given;

2.relative is a relative property, the setting method is: position:relative; This relative property is relative to his original position, not relative to the parent element, or relative to the root element, to make it clear that the most confusing place here

3.absolute is absolute positioning, its reference is a parent element, and the position property of the parent element is non-static, and if the parent element position is static, then look up, looking for the parent parent, until the parent element position The property is non-static, and if all the parent element position property is static, its reference is the body root element

4.fixed is a fixed position, positioning is also an absolute value, but its reference is not a parent element, but a Windows window; (usually used in a fixed position of navigation, or back to the top button)

For example:

1.position:static; When not set, the position is automatically set to static;

<! DOCTYPE html>
　　
2. Position:relative Setting relative properties
When you set a relative property, the space occupied by the original element does not change, and the element is offset relative to its original position, given the top, bottom, left, and right relative offsets
<! DOCTYPE html>
　　
3. Position:absolute set absolute positioning, refer to the parent element for positioning
Reference root element body Absolute positioning
<! DOCTYPE html>
　　
Absolute positioning with reference to parent Div.box1
<! DOCTYPE html>
4. position:fixed; Set fixed positioning;
<! DOCTYPE html>
　　
The above is the personal understanding of CSS positioning, if you need to really master, but also need to practice a few more times
On the position positioning problem of CSS