Overlapping divs with opaque background

Question

I have two divs with a background color, one overlapping the other. The problem is that I can see the content of the underlying div through the top div.

https://jsfiddle.net/jost_s/0dxwtbvn/23/

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  margin-left: 50px;
  margin-top: -50px;
  border: 1px solid white;
}

<div>AB</div>
<div class="overlapping">CD</div>

use position:relative so it is paint at front. use z-index also if other content is also positioned https://jsfiddle.net/c57z6n84/ — G-Cyrillus, Oct 30 '19 at 16:02
Please post your code in your question, not on a third party site. — j08691, Oct 30 '19 at 16:10

score 1 · Answer 1 · answered Oct 30 '19 at 16:07

1

Use position: relative

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  margin-left: 50px;
  margin-top: -50px;
  border: 1px solid white;
  position:relative;
}

<div>
AB
</div>
<div class="overlapping">
CD
</div>

answered Oct 30 '19 at 16:07

Deepu Reghunath

8,132
2
38
47

Why? While that appears to resolve the issue, why does that work? – j08691 Oct 30 '19 at 16:09
Yes, I would like to know that too. – Jost Oct 30 '19 at 16:35

score 1 · Answer 2 · answered Oct 30 '19 at 16:14

1

Without a position property, they're not really overlapping in the context of the way the browser renders them.

There's probably a better explanation of why the second block overlaps the first block, but not it's content, but I'm sure it involves a deep understanding of how the rendering engine works. You might even get a different result in different browsers.

To get the desired effect, position the overlapping block instead of using the margin...

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  position: relative;
  top: -50px;
  left: 50px;
  border: 1px solid white;
}

<div>
  AB
</div>
<div class="overlapping">
  CD
</div>

answered Oct 30 '19 at 16:14

Vince

3,962
3
33
58

1

not really deep understanding but need to find where it's defined in the Specification which is tricky. Full detail here: https://stackoverflow.com/q/48731110/8620333 – Temani Afif Oct 30 '19 at 19:17
@TemaniAfif Our definitions of what is considered a deep understanding differ significantly Your linked question was clearly well-researched, but you still had to speculate as to why, exactly, it was happening. The top answer (6 full page lengths to read on my screen) starts with a warning: "Reading the following information can affect your mental health." (bounty awarded, but answer not accepted??). – Vince Oct 30 '19 at 22:03
1

I didn't accept any answer because I didn't get the answer I was waiting .. the top answer gave me where this was defined but I am still looking for *why* it was defined like that. What is the reason of such non intuitve choice. I my self gave an answer but based on my own thinking like the other answers too. – Temani Afif Oct 30 '19 at 22:07

score 0 · Accepted Answer · answered Oct 30 '19 at 16:21

I would use transform: translate(); to position the elements instead of margin. Since its triggering the stacking context and assure that the elements are "stacket" in the right way.

I cannot really explain why margin behaves in this way but maybe someone wants to educate me.

div {
  background-color: lightblue;
  width: 100px;
  height: 100px;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlapping {
  border: 1px solid white;
  transform: translate(50px, -50px);
}

<div>
  <p>
    AB
  </p>

</div>
<div class="overlapping">
  <p>
    CD
  </p>
</div>

Both solutions work, `position: relative` and `transform`. I accepted this answer because it involves less changes. — Jost, Oct 30 '19 at 16:37

Overlapping divs with opaque background

3 Answers3