Position elements

Anchor an absolute badge to a card:

<article class="relative">
  <span class="absolute end-2 top-2">New</span>
</article>

relative leaves the article in normal flow and establishes the containing block for its positioned descendant. absolute removes the badge from normal flow, while end-2 and top-2 set logical-inline and physical-block offsets.

The other position modes solve different problems:

• static uses normal positioning
• relative keeps the element’s original space and can anchor descendants
• absolute positions against a containing block and does not reserve space
• fixed positions against the viewport
• sticky behaves in flow until its inset threshold is reached inside the relevant scroll container

A sticky header needs an inset such as top-0. It can appear broken when an ancestor creates the scrolling area, clips overflow, or does not provide enough scroll distance.

Positioned elements can overlap content. Add space for a badge if it could cover a heading, and test text zoom and long translations. If “New” carries meaning, keep it in the accessibility tree; decorative overlays should be hidden appropriately.

z-10 changes stacking order only within the applicable stacking context. Transforms, opacity, isolation, and positioned ancestors can create new contexts, so an enormous z-index does not always escape an ancestor. Inspect stacking contexts before escalating numbers.

Use normal flow, Flexbox, or Grid for primary page structure. Absolute coordinates couple the layout to one content size and viewport.

Your action is to add an absolute badge and sticky section heading. Increase text to 200%, add a long title, and place the component inside an overflow container. Record which containing block and scroll container control each result.