Position has five usages: "static", "relative", "absolute", "fixed" and "sticky": 1. static default value, which means no special positioning; 2. relative positioning, It means positioning relative to the position of the element in the document flow; 3. Absolute absolute positioning means positioning relative to the nearest non-static positioned ancestor element, etc.
# Operating system for this tutorial: Windows 10 system, Dell G3 computer.
In CSS, the position attribute has the following uses:
static: Default value, the elements are arranged normally according to the document flow, and no special positioning is performed.
relative: Relative positioning, the element is positioned relative to its normal position in the document flow. You can use the top, right, bottom, and left properties to adjust the offset of an element relative to its normal position.
Absolute: Absolute positioning, the element is positioned relative to the nearest non-static positioned ancestor element. If no non-statically positioned ancestor element is found, it is positioned relative to the document's initial containing block. You can use the top, right, bottom, and left attributes to specify the offset of an element relative to its positioned parent element.
fixed: Fixed positioning, the element is positioned relative to the browser window and will remain in a fixed position even if the page is scrolled. You can use the top, right, bottom, and left attributes to specify the offset of an element relative to the browser window.
sticky: Sticky positioning, the element is positioned in the document flow according to the scroll position, and becomes fixed positioning until the scroll reaches a certain threshold. You can use the top, right, bottom, and left properties to specify the offset of an element relative to its positioned parent element or the viewport.
By using these positioning methods, combined with appropriate offset attributes, various complex layout effects can be achieved, such as creating floating effects, fixed navigation bars, and absolutely positioned pop-up boxes. wait.
The above is the detailed content of What are the uses of position. For more information, please follow other related articles on the PHP Chinese website!