Positioning

position: static;    /* default — in normal flow */
position: relative;  /* offset from own normal position; creates stacking context */
position: absolute;  /* removed from flow; positioned relative to nearest non-static ancestor */
position: fixed;     /* removed from flow; positioned relative to viewport */
position: sticky;    /* hybrid: relative until threshold, then sticks like fixed */

top: 20px;
right: 0;
bottom: 10%;
left: auto;

/* Logical equivalents */
inset-block-start: 0;    /* top in horizontal writing modes */
inset-block-end: 0;      /* bottom */
inset-inline-start: 0;   /* left in LTR */
inset-inline-end: 0;     /* right in LTR */

/* Shorthand: top right bottom left */
inset: 0;            /* all sides 0 — same as top:0 right:0 bottom:0 left:0 */
inset: 0 auto;       /* top/bottom 0, left/right auto */
inset: 10px 20px 30px 40px;

.box {
  position: relative;
  top: 10px;    /* moves down 10px, original space preserved */
  left: 20px;   /* moves right 20px */
}
/* Creates a stacking context (if z-index is set) */
/* Acts as containing block for absolutely-positioned children */

.parent {
  position: relative; /* establishes containing block */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
  /* Positioned relative to nearest ancestor with position != static */
  /* Removed from flow — siblings ignore its space */
}

/* Common: stretch to fill parent */
.overlay {
  position: absolute;
  inset: 0;  /* top:0 right:0 bottom:0 left:0 */
}

/* Center in parent */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* stays at top of viewport on scroll */
}

.fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
}

.header {
  position: sticky;
  top: 0;      /* sticks when top edge reaches 0 from viewport top */
  /* remains in flow; reserves its original space */
}

/* Sticky table headers */
th {
  position: sticky;
  top: 0;
  background: white;
}

/* Horizontal sticky */
.label {
  position: sticky;
  left: 0;
}

z-index: auto;    /* default — participates in parent stacking context */
z-index: 0;
z-index: 10;
z-index: -1;      /* behind normal flow content */
z-index: 9999;

/* Isolate component's z-index to its own context */
.modal-wrapper {
  isolation: isolate;
}

float: left;
float: right;
float: none;  /* default */

clear: left;
clear: right;
clear: both;
clear: none;

/* Modern clearfix (display: flow-root is preferred) */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Preferred */
.container { display: flow-root; }

clip-path: none;
clip-path: inset(10px 20px 30px 40px);          /* top right bottom left */
clip-path: inset(10px 20px round 8px);          /* with border-radius */
clip-path: circle(50%);
clip-path: circle(50px at 50% 50%);
clip-path: ellipse(100px 50px at center);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* triangle */
clip-path: path("M 0 0 L 100 0 L 100 100 Z");   /* SVG path */
clip-path: url(#my-svg-clip);

transform: none;
transform: translate(10px, 20px);
transform: translateX(10px);
transform: translateY(20px);
transform: translateZ(10px);     /* 3D */
transform: translate3d(10px, 20px, 30px);
transform: scale(1.5);
transform: scale(1.5, 0.8);     /* x, y */
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(45deg);
transform: rotateX(45deg);      /* 3D */
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: skew(10deg, 5deg);
transform: skewX(15deg);
transform: skewY(15deg);
transform: perspective(500px) rotateY(45deg); /* local perspective */
transform: matrix(a, b, c, d, e, f);

/* Multiple transforms — applied right to left */
transform: translateX(50px) rotate(45deg) scale(1.2);

transform-origin: center;       /* default */
transform-origin: top left;
transform-origin: 50% 50%;
transform-origin: 20px 40px;
transform-origin: 0 0 10px;    /* 3D */

transform-box: border-box;      /* reference box for transform-origin */
transform-box: fill-box;
transform-box: content-box;

/* On the parent — applies to all children */
.scene {
  perspective: 800px;
  perspective-origin: 50% 50%;
}
.cube { transform: rotateY(45deg); }

/* Flat vs preserve-3d */
transform-style: flat;           /* default — children flattened */
transform-style: preserve-3d;    /* children keep 3D position */

/* Backface visibility */
backface-visibility: visible;    /* default */
backface-visibility: hidden;     /* hide back of rotated element */

/* Smooth anchor scroll */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Offset for sticky headers */
.section { scroll-margin-top: 80px; }

/* Snap scrolling */
.container {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;  /* axis: x|y|both; strictness: mandatory|proximity */
}
.slide {
  scroll-snap-align: start;       /* start | center | end */
  scroll-snap-stop: always;       /* prevent skipping */
}
.container { scroll-padding: 1rem; } /* offset snap points */

/* Hint browser to prepare compositing layer */
.animated { will-change: transform, opacity; }

/* Reset after animation */
.animated.done { will-change: auto; }
/* Do NOT set on too many elements — creates unnecessary layers */