The purpose of using positioning in CSS is to more precisely control the layout and positioning of elements on the page. Through positioning, elements can be offset relative to their normal document flow positions, achieving more flexible layout effects.
There are four categories of targeting:
- Static Positioning (Static Positioning): Static positioning is the default positioning method for elements, and it is also the most common positioning method. Elements are laid out according to the normal document flow and are not affected by positioning attributes. Use
position: static;to set. - Relative Positioning: Relative positioning offsets an element relative to its normal document flow position, but does not affect the layout of other elements. Adjust the position of the element by specifying relative offsets (top, right, bottom, left). Relatively positioned elements still retain their original space occupation. Use
position: relative;to set. - Absolute Positioning: Absolute positioning takes an element out of the normal document flow and positions it relative to its nearest positioned (non-statically positioned) ancestor element. If there are no positioned ancestor elements, positioning is relative to the document's initial containing block. Use absolute positioning to precisely control the position of elements. Use
position: absolute;to set. - Fixed Positioning: Fixed Positioning is a special kind of absolute positioning where elements are positioned relative to the viewport rather than relative to the parent element. A fixed-positioned element remains in a fixed position when the page is scrolled and does not change position as the page scrolls. Use
position: fixed;to set.
By using these positioning methods, the precise layout and positioning of elements on the page can be realized, making the page more creative and interactive. Each positioning method has its applicable scenarios, and an appropriate positioning method can be selected according to needs to achieve the desired effect.