我在底部使用负边距来拉相邻元素以重叠当前元素。我的目的是让它重叠。但我希望整个 div 重叠在图像上方。但是，事实证明它也删除了被拉元素的背景。有人可以解释一下吗？
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<style>
.div1 {
background-color: black;
}
img {
margin-bottom:-20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="http://placehold.it/200x300" alt="">
<div class="div1">
Here is example text
</div>
</div>
</div>
</div>
</body>
</html>http://jsbin.com/mejoci/edit?html,css,output
编辑：当元素被定位（固定|相对|绝对）但不是静态位置时它有点工作，即使没有设置位置也是默认位置。
在示例代码中，两个元素共享相同的堆栈上下文。
既然如此，定义元素如何分层的规则在规范中定义如下：（粗体是我的）
在每个堆叠上下文中，以下图层按从后到前的顺序绘制：
- 形成堆叠上下文的元素的背景和边框。
- 具有负堆栈级别的子堆栈上下文（首先是最负的）。
- 流入、非内联级别、非定位后代。
- 非定位浮动。
- 流入、内联级、非定位后代，包括内联表和内联块。
- 堆栈级别为 0 的子堆栈上下文和堆栈级别为 0 的定位后代。
- 具有正堆栈级别的子堆栈上下文（首先是最不积极的）。
所以你可以看到 -在相同的堆叠上下文中-内联级元素(#5)绘制在非内联级元素(#3)之上
因此，在您的情况下 - 由于 和<img>共享<div>相同的堆叠上下文，并且该<img>元素是内联级元素 - 它被绘制在<div>- 即使<div>在文档树顺序中稍后出现。
查看这个codepen 演示，它进一步说明了这一点
额外阅读：