Why does transform change an element visually without moving surrounding content?

That can be expected: the transform changes the card’s rendered appearance without changing the space it had in normal flow. For box-model layout, surrounding content is laid out using the element’s pre-transform space; it does not shift simply because the card is drawn elsewhere. [S1]

Think of it as two positions:

1. Layout position: where the browser placed the card when arranging the page.
2. Rendered position: where the card appears after the transform is applied.

A translation changes the second position, not the first. If your goal is to make later content move down too, change the layout spacing or arrangement rather than relying on a visual transform.

Here is a minimal comparison. In the first version, the cards use their ordinary layout positions. In the second, the first card is drawn lower, while the following card still starts in the same layout position it had before the transform.

.card {
  padding: 1rem;
  border: 1px solid #777;
}

/* Before: no visual offset */
.card--first {
  transform: none;
}

/* After: visual offset, not a layout gap */
.card--first.is-shifted {
  transform: translateY(20px);
}

<div class="card card--first is-shifted">First card</div>
<div class="card">Second card</div>

Imagine the second card still beginning at its original spot, while the first card is painted 20 pixels lower. Depending on the gap, the two cards may overlap. The transformed bounds can also extend the area that contributes to overflow, which may affect scrolling. [S1]

This example illustrates the behavior for ordinary CSS box-model layout; it is not a claim about every kind of layout or rendering system.

A non-none transform creates a stacking context. It is painted within its parent stacking context at the order associated with a positioned element with z-index: 0. It also establishes a containing block for positioned descendants. [S1]

So a transformed element can behave differently in stacking comparisons than an untransformed sibling. Raising a child’s z-index is not a universal fix: stacking contexts constrain how descendants are compared with elements outside their context. Check the transformed element and its surrounding stacking contexts, then decide which element should appear above the other. Avoid adding more transforms just to force a visual result without checking what they do to stacking.

Ask whether the surrounding content should respond to the move. If it should, adjust the layout itself—for example, the relevant spacing or layout arrangement. If you only want a visual offset, a transform may fit, but check for overlap, stacking changes, and scrolling effects.

A useful review sequence:

1. Compare the element’s original layout space with its rendered bounds.
2. Check whether neighboring content should move or remain in place.
3. Inspect overlap and which element should paint on top.
4. Check whether transformed bounds affect overflow or scrolling.
5. Confirm the result at the relevant viewport sizes.

For the two-card example, if the second card must start 20 pixels lower, use a layout adjustment that creates that space. If it should stay put while the first card is merely nudged for appearance, retain the transform and check the overlap. The specification explains the box-model flow and stacking effects; it does not prescribe a particular design choice for your page. [S1]