Layout
128 bites tagged Layout — interview questions with model answers, and 60-second explainers.
CSS Stacking Contexts: The Z-Axis Explained
A CSS stacking context is like a self-contained group of layers. Elements inside only compete for z-index with siblings in that same group. They're created by properties like `position` with `z-index`, `opacity`, or `transform`.
CSS Margin Collapsing: The Largest Margin Wins
Instead of adding up, vertical margins on adjacent block elements 'collapse' into one, taking the size of the largest margin. This explains why two paragraphs with `margin: 1rem` don't have `2rem` of space between them. The footgun is assuming it's a bug.
CSS Positioning: Taking Elements Out of Normal Flow
CSS `position` lets you override the default document flow. Think of it as telling an element to ignore its neighbors and listen to `top`/`left` coordinates instead. Use it for overlays, modals, and sticky headers.
CSS box-sizing: Predictable Element Sizing
The `box-sizing` property controls if padding and borders are added outside an element's width or carved out from inside. Using `border-box` makes layouts predictable, ensuring a `width: 100px` box is exactly 100px wide.
CSS 'display': How Elements Occupy Space
The CSS `display` property defines an element's layout role: does it demand its own line (`block`) or share space (`inline`)? It's essential for everything from text flow to complex layouts with `flex` and `grid`.
CSS Box Model: Every Element is a Box
Every HTML element is a box with layers: content, padding, border, and margin. This model dictates how elements take up space and align, forming the basis of all CSS layout. The footgun is the default sizing, which adds padding *outside* the set width.
MotionLayout: Animate Layouts with States, Not Code
MotionLayout animates layouts by describing start and end states in XML, letting the system handle the transition. Use it for complex UI choreography, like a collapsing toolbar, or to link animation progress to a user's swipe.
ConstraintLayout: Flexible UIs Without Nesting
ConstraintLayout positions UI elements by their relationships, like anchoring objects on a blueprint. It's ideal for responsive screens that avoid deep, slow view hierarchies.
Get Layout bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.