Contents
I. Why Positioning Is Needed
An element can move freely within a box and overlap other boxes.
When the window is scrolled, some modules stay fixed at a certain position on the screen.
Neither of these effects can be achieved quickly with standard flow or floats alone; positioning is needed in those cases.
II. Components of Positioning
Positioning: placing a box at a certain position
Positioning = positioning mode + edge offsets
(The positioning mode specifies how the element is positioned in the document, while the edge offsets determine the element’s final position.)
2.1 Positioning Modes
The positioning mode determines how an element is positioned. It is set with the CSS position property.
| Value | Meaning |
|---|---|
| static | Static positioning |
| relative | Relative positioning |
| absolute | Absolute positioning |
| fixed | Fixed positioning |
2.2 Edge Offsets
Edge offsets move a positioned box to its final position. There are four properties: top, bottom, left, and right.
| Edge offset property | Example | Description |
|---|---|---|
| top | top: 80px | Top offset; defines the distance of the element from the top edge of its parent |
| bottom | bottom: 80x | Bottom offset; defines the distance of the element from the bottom edge of its parent |
| left | left: 80px | Left offset; defines the distance of the element from the left edge of its parent |
| right | right: 80px | Right offset; defines the distance of the element from the right edge of its parent |
III. Static Positioning static
Static positioning is the default positioning method for elements; it means no positioning.
Syntax:
选择器 { position: static; }- Static positioning places elements according to standard flow and has no edge offsets
IV. Relative Positioning relative
With relative positioning, when an element moves, it moves relative to its original position.
Syntax:
选择器 { positon: relative; }- Relative positioning moves an element relative to its own original position
- It continues to occupy its original position in standard flow, and subsequent boxes still treat it as part of standard flow. In other words, relative positioning does not take the element out of standard flow.
V. Absolute Positioning absolute
With absolute positioning, when an element moves, it moves relative to its ancestor elements.
Syntax:
选择器 { position: absolute; }-
If there is no ancestor element, or the ancestor elements are not positioned, the element is positioned relative to the browser
-
When a parent is positioned (relative, absolute, or fixed positioning), the element moves relative to the nearest positioned ancestor
-
Absolute positioning no longer occupies the original position.
VI. Absolute Child, Relative Parent
Use absolute positioning on the child and relative positioning on the parent.
- An absolutely positioned child does not occupy space, so it can be placed anywhere inside the parent box without affecting its sibling boxes
- The parent box needs positioning so the child is constrained to display within the parent
- When laying out the parent box, it needs to occupy space, so the parent can only use relative positioning
VII. Fixed Positioning
Fixed positioning fixes an element at a position in the browser’s viewport. The main use case is keeping an element’s position unchanged while the browser page scrolls.
Syntax:
选择器 { position: fixed; }- Move the element relative to the browser viewport
- It has nothing to do with the parent element
- It does not move when the page is scrolled
- Fixed positioning no longer occupies its original position; it is also out of standard flow
Comments