R041: Visible text-bearing elements overlapping

What it leaves alone

Inline elements, whose boxes span wrapped lines and overlap by accident; boxes under 8px, like visually hidden labels; overlays, and anything off screen, like a closed drawer; and two blocks that cover each other almost entirely, which is how carousels stack their slides. Up to eight overlaps per page.

Broken, then fixed

.price-tag {
  position: absolute;
  left: -24px;
}

.price-tag {
  position: absolute;
  inset-inline-start: -24px;
}

Check it by hand

Run document.head.insertAdjacentHTML('beforeend', '<style>* { outline: 1px solid rgb(255 0 0 / 0.5) }</style>') in the DevTools console to outline every box, and look for outlines crossing over text. Select one of the pair and check its margin and position in the Computed pane.

What the report shows you

Each R041 finding carries the fields below that apply to it, so you can see why it fired without rerunning the scan.

overlapsWith

The other block's selector.

overlapPx

The size of the overlap, width and height in pixels.

overlapRatio

The overlap as a share of the smaller block, from 0 to 1.

textA

The start of the smaller block's text.

textB

The start of the other block's text.