📝 Definition: Sets the positioning method used for an element. Determines whether an element
is positioned using CSS properties like top, right, bottom, and left. Different position values change how these
offset properties work and how the element interacts with other elements in the document. Understanding the 5
position values is fundamental to CSS layout.
absolute – Positioned relative to nearest positioned parent
fixed – Fixed relative to viewport
sticky – Hybrid relative/fixed positioning
2. position: relative
📝 Definition: Positions an element relative to its normal position in the document flow. The
element still takes up its original space, and offset properties (top, right, bottom, left) move it from that
position. Useful for slight adjustments and creating stacking contexts without removing elements from normal
flow.
Default Value: (offset properties default to auto)
Offset Properties: top | right | bottom | left (values can be positive or negative)
✦ Relative with Top and Left
Element moved 20px down and 30px right from original position
📝 Definition: Positions an element relative to its nearest positioned ancestor (not static).
The element is removed from normal flow. Perfect for tooltips, dropdowns, modals, and overlays that should be
positioned independently. If no positioned parent exists, it positions relative to the document body.
Important: Element is removed from normal document flow
Common Uses: Tooltips, dropdowns, modals, overlays
✦ Absolute Positioned Child
Element positioned inside a relative parent container
📝 Definition: Fixes an element relative to the viewport (browser window), not the
document.
The element stays in the same position even when scrolling. Fixed positioning removes the element from
normal flow. Perfect for navigation bars, floating action buttons, chat widgets, and sticky headers that
need to stay visible while scrolling.
Important: Element is fixed relative to viewport, not parent
Common Uses: Navigation bars, sticky headers, floating buttons, chat widgets
✦ Fixed Positioned Element
Element stays fixed on screen even when scrolling
Normal scrollable content area. A fixed element would stay in place while this scrolls.
📝 Definition: Hybrid positioning that starts in normal flow but becomes fixed relative
to a parent container when scrolling. The element "sticks" to a specified position (top, bottom, left,
right) when that edge enters the viewport. Perfect for sticky table headers, section navigation, and
headers that should stick while scrolling content. Requires a defined offset property to work.
Important: Must have top/bottom/left/right values defined and stay within parent
bounds
Common Uses: Table headers, section headers, navigation tabs
📝 Definition: Offset properties determine the position of an element relative to its
reference point. The reference point depends on the position value (relative, absolute, fixed, etc.).
These properties accept length values (pixels, em, rem, etc.), percentages, or auto. They can be
positive or negative, allowing elements to move in any direction from their reference position.
Values: length (px, em, rem) | percentage (%) | auto
Properties: top | right | bottom | left
✦ Individual Offset Properties
Each offset property controls movement from one side
📝 Definition: Shorthand property that sets all four offset properties (top,
right, bottom, left) at once. Follows the standard CSS margin/padding shorthand syntax: inset:
10px (all), inset: 10px 20px (vertical, horizontal), or inset: 10px 20px 30px 40px (top, right,
bottom, left). Modern browsers support this property for cleaner, more concise code when
positioning absolutely positioned or fixed elements.
📝 Definition: Logical properties provide direction-agnostic
positioning that adapts to writing direction (LTR vs RTL languages). Instead of absolute
directions (top, left, right, bottom), they use logical directions (block-start,
block-end, inline-start, inline-end). This ensures layouts work correctly in different
languages without requiring separate CSS. Essential for building truly multilingual,
accessible websites.
Note: Modern browsers have good support; currently maps to standard
properties in most implementations
✦ Logical Direction Mapping (LTR)
In left-to-right languages, logical properties map as shown:
inset-inline-start → left
inset-inline-end → right
inset-block-start → top
inset-block-end → bottom
✦ Logical Positioning Example
Using logical properties for positioning
Logical Position
.logical-position {
position: absolute;
inset-block-start: 15px; /* = top in LTR */
inset-inline-start: 25px; /* = left in LTR */
}
9. z-index – Stacking Order (Layer Control)
📝 Definition: Controls the stacking order of positioned elements
along the z-axis (depth). Elements with higher z-index values appear on top of those
with lower values. Only works on positioned elements (position not static). Creates
stacking contexts that can affect nested elements. Essential for managing overlays,
modals, dropdowns, and complex layered layouts.
Default Value: auto (0)
Values: number (integer) | auto | inherit
Important: Works only on positioned elements (position: relative,
absolute, fixed, sticky)
✦ Z-index: Layering Elements
Elements with different z-index values demonstrating stacking