Classification and Positioning Properties
| Property | Possible Values | Description |
|---|---|---|
display | block, inline, inline-block, flex, grid, none | Defines how an element is displayed |
visibility | visible, hidden, collapse | Controls whether an element is visible |
overflow | visible, hidden, scroll, auto | Specifies how content overflows its box |
z-index | auto, number | Controls the stack order of elements (higher number appears in front) |
opacity | 0 to 1 (decimal) | Controls element transparency (0 = invisible, 1 = fully visible) |
| Property | Possible Values | Description |
position | static, relative, absolute, fixed, sticky | Defines how an element is positioned |
top | px, %, auto | Moves element from the top edge (for relative, absolute, fixed) |
right | px, %, auto | Moves element from the right edge |
bottom | px, %, auto | Moves element from the bottom edge |
left | px, %, auto | Moves element from the left edge |
float | left, right, none | Moves an element to the left or right |
clear | left, right, both, none | Prevents elements from floating next to each other |
Explanation of position Values
| Value | Behavior |
static | Default positioning (normal document flow) |
relative | Moves relative to its original position |
absolute | Moves relative to the nearest positioned ancestor |
fixed | Stays fixed in place even when scrolling |
sticky | Sticks to a position until scrolled past |
Example:
.box {
width: 200px;
height: 100px;
position: absolute;
top: 50px;
left: 100px;
background-color: lightblue;
}✔ Moves 50px from the top
✔ Moves 100px from the left
✔ Absolute positioning relative to the nearest positioned ancestor