Positioning Practical Examples
Real-world positioning: notification badges, floating labels, sticky table headers, and scroll-triggered reveals.
CSS
Intermediate
6 min read
CSS Positioning Practical Examples
Example
/* Notification badge on icon */
.icon-btn {
position: relative;
display: inline-block;
}
.badge {
position: absolute;
top: -4px;
right: -4px;
background: red;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
}
/* Floating label on input */
.field { position: relative; }
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
position: absolute;
top: -0.5rem;
left: 0.5rem;
font-size: 0.75rem;
background: white;
padding: 0 4px;
} Pro Tip
The floating label pattern requires a placeholder=" " (single space) on the input to use :placeholder-shown reliably.