1. The display Property
The display property dictates the fundamental layout behavior of an element: how it interacts with the space around it. Every HTML element has a default display value (e.g., <div> is block, <span> is inline).
A. Block, Inline, and Inline-Block
| Value | Behavior | Characteristics | Example Elements |
block | Takes up the full available width and forces a new line before and after itself. | Can set width, height, padding, and margin. | div, h1, p, ul, header |
inline | Takes up only the necessary width. Does not force a new line. | Cannot set width or height. Vertical padding/margin (top/bottom) is ignored. | span, a, strong, em |
inline-block | A hybrid. Flows horizontally like an inline element, but can accept width, height, and vertical padding/margin like a block element. | Useful for laying out small components side-by-side. | Often used for buttons or navigation links. |
B. Other Important display Values
none: Completely removes the element from the document flow. It takes up no space and is not rendered. (Often controlled by JavaScript.)flex: Initializes a Flexbox container (covered in P2.3).grid: Initializes a Grid container (covered in P3.1).
/* Example of changing default behavior */
.nav-link {
display: inline-block; /* Now behaves inline but can have vertical padding */
padding: 10px 15px;
}
#hidden-section {
display: none; /* Element disappears entirely */
}
2. The position Property
The position property defines how an element is positioned on the page relative to other elements, the viewport, or its normal position.
| Value | Description | Offset Behavior (Top/Left/etc.) |
static | Default. The element follows the normal flow of the page. | Offset properties (top, left, etc.) are ignored. |
relative | Positions the element relative to its original position in the normal flow. | Offset properties move the element away from its normal spot, leaving a gap where it was. |
absolute | Positions the element relative to its nearest positioned ancestor (i.e., ancestor whose position is NOT static). | Removed from the normal flow. Offsets define the distance from the ancestor’s edges. |
fixed | Positions the element relative to the viewport (the browser window). | Removed from the normal flow. Stays in place even when the user scrolls. |
sticky | Behaves as relative until a threshold is met, then acts as fixed. | Useful for navigation headers that stick to the top after scrolling past them. |
A. Positioning Context (Crucial for absolute)
For an absolute child element to be positioned relative to its parent, the parent must be turned into a positioning container by giving it a position value other than static (usually position: relative;).
/* Parent element: creates the positioning context */
.container {
position: relative;
width: 500px;
height: 300px;
}
/* Child element: positioned 20px from the top-right corner of the parent */
.overlay {
position: absolute;
top: 20px;
right: 20px;
width: 100px;
height: 100px;
}
B. Stacking Order with z-index
When elements are positioned using absolute, relative, or fixed, they can overlap. The z-index property controls the stacking order:
- It only works on positioned elements.
- It accepts unitless integer values (positive or negative). Higher numbers appear on top of lower numbers.
.card-front {
position: absolute;
z-index: 10;
}
.card-back {
position: absolute;
z-index: 5; /* This element appears underneath the front */
}
