CSS Display & Position - Definitions, Values & Usage
Complete guide to CSS display and position properties for layout and positioning control
Overview
Complete guide to CSS display and position properties for layout and positioning control
Reference Content
Display Property
Block
.block-element {
display: block;
/ Takes full width available /
/ Starts on new line /
/ Height/width can be set /
}/ Default block elements: div, p, h1-h6, section, header, footer /
Inline
.inline-element {
display: inline;
/ Takes only content width /
/ Stays in line with text /
/ Height/width ignored /
/ Vertical padding/margin don't affect layout /
}/ Default inline elements: span, a, strong, em, img /
Inline-Block
.inline-block-element {
display: inline-block;
/ Best of both worlds /
/ Stays in line /
/ Respects width/height /
/ Respects all padding/margin /
}None
.hidden {
display: none;
/ Removes from document flow /
/ Not rendered at all /
/ Screen readers ignore it /
}/ Alternative for accessibility /
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
Position Property
.static {
position: static;
/ Normal document flow /
/ top/right/bottom/left have no effect /
}Z-Index & Stacking Context
.element {
position: relative; / position required (not static) /
z-index: 10;
}/ Z-index scale system /
:root {
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
Common Layout Patterns
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1040;
}.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1050;
background: white;
padding: 2rem;
border-radius: 8px;
}
Performance Tips
/ Avoid changing position in animations /
/ Bad /
@keyframes slide {
to { left: 100px; }
}/ Good - use transform instead /
@keyframes slide {
to { transform: translateX(100px); }
}