Hides the element completely (removes it from document flow):
display: none;
/* Element is completely hidden */
/* Also: */
visibility: hidden; /* Hidden but takes up space */
Position Property
The position property controls how an element is positioned on the page.
position: static (Default)
Element flows normally in the document. Top, bottom, left, right have no effect.
position: static;
position: relative
Element flows normally, but can be offset relative to its normal position.
position: relative;
top: 20px; /* Move down 20px */
left: 10px; /* Move right 10px */
Normal position
Relative position (top: 20px, left: 20px)
Space is reserved for the relative box above
position: absolute
Element is removed from document flow and positioned relative to its nearest positioned parent.
position: absolute;
top: 50px;
left: 100px;
Top-left (10px, 10px)
Top-right
Bottom-left
position: fixed
Element is positioned relative to the viewport (browser window) and stays there when scrolling.
position: fixed;
top: 20px;
right: 20px;
/* Common for navigation bars and sticky headers */
position: sticky
Element scrolls normally but "sticks" to a position when scrolling past it.
position: sticky;
top: 0;
/* Sticks to top when scrolling */
Float
Float is an older layout method. Still useful for wrapping text around images. Flexbox is preferred for layouts.
float: left; /* Float to left */
float: right; /* Float to right */
float: none; /* No float (default) */
/* Clear floats */
clear: both; /* Don't float next to floated elements */
Z-Index
Controls stacking order when elements overlap. Higher values appear on top.
position: absolute;
z-index: 10; /* On top */
/* Another element */
position: absolute;
z-index: 1; /* Behind */
z-index: 1
z-index: 10 (on top)
Width and Height with Positioning
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Stretches to fill container */
width: 100%;
height: 100%;
/* Alternative approach */
Common Layout Pattern: Sticky Header
header {
position: sticky;
top: 0;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
/* Stays at top while scrolling */
}
Key Takeaways
display: block takes full width, starts new line
display: inline flows with text, no width/height
display: inline-block combines both approaches
position: relative moves element from its normal position
position: absolute removes from flow, positions relative to parent