Why border and background of a negative-margin'ed
goes under previous

Question

An <img>, followed by a <p> with negative margin. The <p> border and background are under the img. I don't understand why. Same in Firefox and Chromium. Thanks !

screenshot

#d1 {
  width:400px;
}
#d1 img {
  max-width:350px;
}
.caption {
  color:red;
  font-size:2em;
  border:3px solid red;
  margin-top:-40px;
  background:#eee;
  padding:10px;
  /*position:relative;*/
}

<div id="d1">
  <img src="https://i.kym-cdn.com/entries/icons/mobile/000/018/012/this_is_fine.jpg">
  <p class="caption">This is fine.</p>
</div>

Adding position:relative to .caption solves the problem, but does not answer the question.

CodePen

StefanBob · Answer 1 · 2019-04-10T13:19:55.850

-1

Why does this happen? Because one element has to be under the other...

There is something called a stacking context. Certain element have a higher stacking context than other..

Root element (the element)
Non-positioned elements in the order they are defined
Positioned elements in the order they are defined

So in this case, the p has a lower stacking context since the position is being changed.

Add z-index to image

#d1 {
  width: 400px;
}

#d1 img {
  position: relative;
  display: block;
  max-width: 350px;
  z-index: 5;
}

.caption {
  color: red;
  font-size: 2em;
  border: 3px solid red;
  margin-top: -40px;
  background: #eee;
  padding: 10px;
  /*position:relative;*/
}

<div id="d1">
  <img src="https://i.kym-cdn.com/entries/icons/mobile/000/018/012/this_is_fine.jpg">
  <p class="caption">This is fine.</p>
</div>

edited Apr 10 '19 at 13:19

answered Apr 10 '19 at 13:18

StefanBob

4,857
2
32
38

4

The question is mainly why it happens not how to fix it – Moses Schwartz Apr 10 '19 at 13:19
1

stacking context has nothing to do here ... and check his screenshot, only the background border are under the image and the content above – Temani Afif Apr 10 '19 at 13:26
oh ok. I answered when text was underneath in the question – StefanBob Apr 10 '19 at 13:27
@MoisheySchwartz Now i'm keeping it here forever – StefanBob Apr 10 '19 at 13:46
@StefanBob Why? it's not an answer to the question. – Moses Schwartz Apr 10 '19 at 13:48

score -1 · Answer 2 · answered Apr 10 '19 at 13:23

Why is the image above the padding and border but below the text?

W3C answers this question already:

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

Most important is this part:

Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

So if you switch the elements you will see that your image is now above you paragraph.

body {
  background-color: #a3d5d3;
}
#d1 {
  width:400px;
}
#d1 img {
  max-width:350px;
  margin-top: -70px;
}
.caption {
  color:red;
  font-size:2em;
  border:3px solid red;
  background:#eee;
  padding:10px;
  /*position:relative;*/
}

<div id="d1">
  <p class="caption">This is fine.</p>
  <img src="https://i.kym-cdn.com/entries/icons/mobile/000/018/012/this_is_fine.jpg">
</div>
<p>Why is the text over, but border and background under ?<br>
  Expected: whole "caption" over img<br>
  NB: <em>position:relative</em> in .caption solves the problem, but does not answer the question
</p>

In your example the background color is also below the image. It should be obvious why. Background color has a lower stacking context. Here is an image that shows the order:

Why border and background of a negative-margin'ed goes under previous

2 Answers2

Why border and background of a negative-margin'ed
goes under previous