YouTip

Position

.static { position: static; }    /* default */
.relative { position: relative; } /* relative to self */
.absolute { position: absolute; } /* relative to parent */
.fixed { position: fixed; }       /* relative to viewport */
.sticky { position: sticky; }     /* scrolls then sticks */

Display

.block { display: block; }      /* full width, new line */
.inline { display: inline; }    /* flows with text */
.inline-block { display: inline-block; } /* inline + width/height */
.hidden { display: none; }      /* removed from layout */

Summary

• absolute positioning needs a relative parent
• fixed stays in place during scroll
• inline-block combines inline flow with block sizing