What's the difference between static and relative positioning in CSS?

Static and Relative Positioning in CSS

In web design using CSS, positioning allows elements to be placed in a desired location within the page. Two fundamental positioning models are static positioning (default) and relative positioning.

Static Positioning

By default, elements are positioned statically. They inherit their position from the HTML flow, meaning they are placed in the document based on their natural order. Static positioning does not allow offsets or movement of elements.

Relative Positioning

Relative positioning gives developers more control over element placement. It allows specific offsets (left, top, right, bottom) to be applied, which are interpreted relative to the element's normal position in the HTML flow. This means that the element moves relative to its original position, without affecting the layout of other elements.

Comparison of Static and Relative Positioning

Feature	Static Positioning	Relative Positioning
Default behavior	Inherited position from HTML flow	Allows offsets relative to normal position
HTML flow	Maintained	Maintained, but offsets applied
Movement	No movement	Movement allowed, but relative to original position

The above is the detailed content of What's the difference between static and relative positioning in CSS?. For more information, please follow other related articles on the PHP Chinese website!