Positioned Layout

Relative Positioning • Josh W Comeau's Course Platform

Default is static

Inset

inset: 0;
inset: 0 0 0 0;
inset auto 0 auto 0;  /* doesn't set a value for top and bottom */

<=>

top: 0;
right: 0;
bottom: 0;
left: 0;

margin: auto

[[Margin#margin: auto in positioned layout]]

• centres the element both horizontally and vertically

position: fixed;
margin: auto;
inset: 0; /* top = right = bottom = left = 0*

Position vs margin

Absolute

• ????top: 0 vs margin-top: auto;

margin > top

---

Last update: 2023-03-20