position in css

1. Position syntax and structure

Position syntax: position: static absolute relative

position parameters:
static : No special positioning, the object follows HTML positioning rules
absolute : Drag the object out of the document flow and use left, right, top, bottom and other attributes for absolute positioning. And its cascading is defined through the css z-index property. At this time, the object does not have margins, but there are still padding and borders
relative: The object cannot be stacked, but will be offset in the normal document flow based on attributes such as left, right, top, bottom, etc.

2. Conditions for using absolute positioning

position:absolute；position:relativeThe use of absolute positioning is usually defined by the parent position:relative positioning, and the child The level defines the position:absolute absolute positioning attribute, and the child uses left or right and top or bottom for absolute positioning.

3. CSS absolute positioning summary

Absolute positioning If the parent does not use position:relative, but directly uses position:absolute absolute positioning, the body tag will be used as the parent at this time, using Position:absolute defines that no matter how many levels of the DIV structure the object is located, it will be dragged out with as the parent (reference level) for absolute positioning.

In absolute positioning, we can use css z-index to define the overlapping order of css layers.

The above is the detailed content of position in css. For more information, please follow other related articles on the PHP Chinese website!