The display and position properties control how elements appear, behave, and are placed on a webpage.
They are used to build layouts, align content, and position elements.
The display property determines how an element behaves in the layout.
display: value;
Inline elements only take up as much width as needed.
They stay on the same line and generally ignore width and height.
Examples:
<span>Hello</span>
<a>Link</a>
<strong>Bold</strong>
Output:
Hello Link Bold
Example:
span {
width: 300px;
}
The width will not work properly because inline elements do not support width and height.
Block elements take up the full available width and always start on a new line.
Examples:
<div></div>
<p></p>
<h1></h1>
<section></section>
Output:
Block 1
Block 2
Block 3
Example:
div {
background: lightblue;
}
Inline-block combines features of both inline and block elements.
It:
Example:
.box {
display: inline-block;
width: 150px;
height: 100px;
}
<div class="box">One</div>
<div class="box">Two</div>
Output:
[One] [Two]
| Display | New Line | Width & Height |
|---|---|---|
inline |
❌ | ❌ |
block |
✅ | ✅ |
inline-block |
❌ | ✅ |
The visibility property controls whether an element is visible.
Visible:
visibility: visible;
Hidden:
visibility: hidden;
Unlike display: none, the element still occupies space.
Item 1
[Hidden Space]
Item 3
display: none
display: none;
The element is completely removed from the layout.
visibility: hidden
visibility: hidden;
The element becomes invisible but its space remains.
The opacity property controls transparency.
opacity: value;
Values range from:
0 → Invisible
1 → Fully Visible
Examples:
opacity: 1;
opacity: 0.5;
opacity: 0;
Example:
.card {
opacity: 0.8;
}
The position property controls where an element appears on the page.
Common values:
staticrelativeabsolutefixedstickyThe default position for all elements.
position: static;
Elements remain in the normal document flow.
Moves an element relative to its original position.
.box {
position: relative;
top: 20px;
left: 30px;
}
The original space remains reserved.
Removes the element from the normal document flow.
The element is positioned relative to the nearest positioned ancestor.
.box {
position: absolute;
top: 0;
right: 0;
}
Common uses:
Parent:
.parent {
position: relative;
}
Child:
.child {
position: absolute;
top: 10px;
right: 10px;
}
The child is positioned inside the parent.
Fixed elements stay in the same place while the page scrolls.
.navbar {
position: fixed;
top: 0;
width: 100%;
}
Common uses:
Sticky elements behave like relative until they reach a scroll position.
After that, they behave like fixed.
.sidebar {
position: sticky;
top: 0;
}
Common uses:
| Position | Normal Flow | Scrolls |
|---|---|---|
static |
✅ | ✅ |
relative |
✅ | ✅ |
absolute |
❌ | Depends |
fixed |
❌ | ❌ |
sticky |
Partial | Sticky After Threshold |
The z-index property controls the stacking order of positioned elements.
.box1 {
z-index: 1;
}
.box2 {
z-index: 10;
}
box2 appears above box1.
z-index only works on positioned elements.
Supported positions:
relativeabsolutefixedstickyExample:
.modal {
position: fixed;
z-index: 9999;
}
<div class="card">
Frontend Development
</div>
.card {
display: inline-block;
width: 300px;
padding: 20px;
position: relative;
opacity: 0.9;
}
Fixed navbar:
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
Notification badge:
.badge {
position: absolute;
top: -5px;
right: -5px;
}
Sticky sidebar:
.sidebar {
position: sticky;
top: 20px;
}
inline-block for modern layouts.position: relative on the parent before using absolute children.sticky over fixed when appropriate for a better scrolling experience.The display property controls how elements behave, while the position property controls where elements appear.
Display
↓
inline
block
inline-block
Position
↓
static
relative
absolute
fixed
sticky
Example:
.card {
display: block;
position: relative;
z-index: 10;
}