CSS Display & Position
Display controls how elements behave in normal layout. Position controls where elements are placed. Together, they help create menus, badges, sticky headers, floating buttons and layered designs.
display
Controls whether elements behave like block, inline or hidden.
position
Controls element placement and movement.
fixed / sticky
Useful for fixed buttons and sticky navigation sections.
z-index
Controls which layer appears above another layer.
After This Chapter, You Will Understand
This chapter teaches how elements appear, flow, move and overlap on a webpage.
Display
Use block, inline, inline-block and none.
Position
Use static, relative, absolute, fixed and sticky.
Offsets
Control top, right, bottom and left values.
Z-Index
Manage overlapping elements and layers.
display Property
The display property controls how an element behaves in page layout.
display: block
Block elements take full available width and start on a new line.
display: inline
Inline elements stay in the same line and take only required width.
display: inline-block
Inline-block stays in line but allows width, height and padding control.
| Display Value | Meaning | Common Use |
|---|---|---|
| block | Takes full width and starts new line | Sections, divs, headings, paragraphs |
| inline | Takes only required width and stays inline | span, links inside text |
| inline-block | Inline behaviour with box control | Buttons, badges, small cards |
| none | Completely hides the element | Menus, modals, conditional sections |
display: inline-block;
}
position Property
Position decides how an element is placed on the page.
1 Position Values
- static: default normal position
- relative: moves from its normal position
- absolute: positions relative to nearest positioned parent
- fixed: stays fixed relative to browser window
- sticky: behaves normal first, then sticks while scrolling
2 Relative Position
Relative moves an element from its original position without removing its original space.
position: relative;
left: 30px;
top: 20px;
}
3 Absolute Position
Absolute places an element relative to the nearest positioned parent.
position: relative;
}
.badge {
position: absolute;
top: 10px;
right: 10px;
}
Fixed and Sticky Position
These positions are useful for navigation, floating buttons and page tools.
4 position: fixed
Fixed elements stay in the same place even when the page scrolls. It is commonly used for WhatsApp buttons, back-to-top buttons and fixed headers.
position: fixed;
right: 20px;
bottom: 20px;
}
5 position: sticky
Sticky elements behave normally until they reach a set scroll position, then they stick. It is useful for sticky menus and quick navigation bars.
position: sticky;
top: 0;
}
z-index
z-index controls which positioned element appears above another element.
6 z-index Syntax
Higher z-index generally appears above lower z-index. It works with positioned elements.
position: absolute;
z-index: 1;
}
.box-two {
position: absolute;
z-index: 2;
}
Practice Display and Position
Edit display, position and z-index values to see the layout change.
Mistakes Students Should Avoid
Display and position are powerful, but wrong usage can break page layout.
Wrong Habits
- Using absolute positioning for complete page layout
- Forgetting position: relative on parent
- Using fixed elements that cover mobile content
- Using display:none for important accessible content
- Expecting z-index to work without positioned elements
Correct Habits
- Use normal flow whenever possible
- Use relative parent for absolute child
- Use fixed elements carefully on mobile
- Use inline-block for buttons and badges
- Use z-index only when elements overlap
Test Your Understanding
Select the correct answers and check your score.
1. Which display value takes full width and starts on a new line?
2. Which display value hides an element completely?
3. Which position value is the default?
4. Which position value keeps an element fixed while scrolling?
5. Which property controls layer order?
Remember These Points
Revise these before moving to Chapter 19.
display:block
Takes full width and starts on a new line.
display:inline
Takes only required width and stays in the same line.
inline-block
Stays inline but allows width, height and padding control.
relative
Moves from normal position while keeping original space.
absolute
Positions relative to nearest positioned parent.
z-index
Controls layer order when elements overlap.