html - 为什么负边距的边框和背景下一个

Question

一个<img>，后跟一个<p>负边距。<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解决问题，但不回答问题。

代码笔

标签： htmlcss

Answer 1

为什么会这样？因为一个元素必须在另一个元素之下......

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

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

所以在这种情况下，由于位置正在改变，p 的堆叠上下文较低。

将 z-index 添加到图像

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