← CodePrimer
CSS
Intermediate
Layout
CSS position values
How do I pin an element or overlap layers?
static, relative, absolute, fixed, sticky.
.badge {
position: absolute;
top: 8px;
right: 8px;
}
.nav {
position: sticky;
top: 0;
z-index: 20;
}Notes
Absolute positions relative to the nearest positioned ancestor.
Keywords: position · absolute · relative · fixed · sticky · z-index
Related
CSS
Three ways to apply CSS
What are inline, internal, and external CSS?
CSS
CSS box model
Why is my element wider than expected?
CSS
Margin vs padding
What is the difference between margin and padding?
CSS
display block inline flex
How does display change layout?
CSS
CSS custom properties
How do I reuse colors with variables?
CSS
Hover and focus-visible
How do I style hover and keyboard focus?