Question

我在底部使用负边距来拉动相邻元素以重叠当前元素。我打算让它重叠。但我希望整个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

编辑：当元素定位（固定|相对|绝对）时，即使没有设置位置，它也是静态位置，这是默认位置。

Answer 1

在示例代码中，两个元素共享相同的堆叠上下文。

在这种情况下，定义元素如何分层的规则在the spec中定义如下:(粗体是我的）

在每个堆叠上下文中，以下按顺序绘制以下图层：


构成堆叠背景的元素的背景和边框。

子堆叠上下文具有负堆栈级别（最多为负数）。

流入的，非内联级别，未定位的后代。

未定位的花车。

流入的，内联级别的非定位后代，包括内联表和内联块。

堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。

具有正堆栈级别的子堆叠上下文（最少积极的第一个）。

所以你可以看到 - 在相同的堆叠环境中 - 内嵌级元素（＃5）上面的非内联级元素（＃3）

所以在你的情况下 - 因为<img>和<div>共享相同的堆叠上下文而<img>元素是内联级元素 - 它被绘制为以上 <div> - 即使<div>稍后出现在文档树顺序中。

查看此codepen demo，进一步说明了这一点

额外阅读：

Elaborate description of Stacking Contexts

Stacking without z-index (MDN)

Z-Index And The CSS Stack: Which Element Displays First?

Answer 2

职位：亲属将解决您的重叠问题

<style>
    .div1 {
      background-color: black;
      position: relative;
    }

    img {
      margin-bottom:-20px;
    }

  </style>

负边距删除静态兄弟的背景属性

2 个答案: