为什么负边距<p>的边框和背景位于先前的<img>下

Question

An <img>，后跟一个<p>负边距的a。在<p>边框和背景是否下img。我不明白为什么。在Firefox和Chromium中相同。谢谢 ！

#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>

添加position:relative到.caption解决问题，但不回答这个问题。

密码笔

Answer 1

为什么会出现这种情况？因为一个元素必须位于另一个元素之下......

有一种东西叫做堆叠上下文。某些元素比其他元素具有更高的堆叠上下文。

1. 根元素（元素）
2. 非定位元素按照定义的顺序排列
3. 按照定义的顺序定位元素

因此，在这种情况下，p 具有较低的堆栈上下文，因为位置正在更改。

向图像添加 z 索引

#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>