01
Absolute positioning on content
position: absolute is fine for decoration, but text and buttons positioned absolutely ignore the content around them. When the screen narrows, the text wraps and grows while the absolute element stays put, so they collide.
Use flexbox or grid for the layout and keep absolute positioning for badges and decorative shapes. If you must position content, switch to position: static at small widths.
@media (max-width: 767px) {
.hero-cta { position: static; margin-top: 1rem; }
}02
Negative margins and fixed heights
A negative margin that pulls a card up into a banner works at one height. When the banner text wraps on mobile, the banner gets taller but the card still pulls up by the same amount and covers the text. Fixed heights cause the same problem in reverse. Prefer gap and padding, and use min-height.
03
Sticky and fixed headers covering content
A fixed header covers the top of the page and the target of every anchor link. Add padding to the body equal to the header height, and scroll-margin-top to linked sections.
[id] { scroll-margin-top: 80px; }Checklist
Questions
Why do elements overlap on mobile but not on desktop?
Something has a fixed position, height or negative margin that was tuned for the desktop layout. On a narrower screen text wraps, boxes grow, and the fixed element no longer moves out of the way.
Is z-index the fix for overlapping?
Rarely. z-index only decides which element is on top; both still occupy the same space. Fix the layout so they don’t share it.
Does overlapping affect accessibility?
Yes. Covered text can’t be read and covered buttons can’t be tapped, and screen magnifier users are hit hardest.