.container { position: relative; } .text-block { position: absolute; top: 0; left: 0; z-index: 2; } .covered-div { position: relative; z-index: 1; } Problem: Floated elements or negative margins cause text to overlay another div.
I’ll give you a few common causes and fixes for when instead of flowing around it. 1. Absolute positioning causing overlap Problem: Text inside a positioned element overlaps another div because the div is taken out of normal flow. divxatope
.covered-div { clear: both; } Problem: A fixed header overlaps the top of a <div> when scrolling. Absolute positioning causing overlap Problem: Text inside a
.text-block { position: absolute; top: 0; left: 0; } Make sure the container has position: relative and the absolute element is contained properly, or adjust z-index : when scrolling. .text-block { position: absolute
.clearfix::after { content: ""; display: table; clear: both; } Or for overlapping text due to floats: