Question

我尝试了许多不成功的事情来完成这项工作。列出太多了。如何使白色div覆盖底部div中的黄色文本？

<div id="bottom">This is some text</div>
<div id="top"></div>

#bottom{
  background:blue;
  height:60px;
  color:yellow;
  font-size:45px;

}

#top{
  background:white;
  height:20px;
  margin-top: -30px;
}

http://jsbin.com/verimekile/edit?html,css,output

Answer 1

只需在#top div

上设置position relative（或绝对值）

＆＃13;

#bottom {
  background: blue;
  height: 60px;
  color: yellow;
  font-size: 45px;
}
#top {
  background: white;
  height: 20px;
  margin-top: -30px;
  position: relative;
}

＆＃13;

<div id="bottom">This is some text</div>
<div id="top"></div>

＆＃13;

在第一个示例中没有覆盖文本的原因是因为这两个元素都未定位并且参与了相同的堆叠上下文 - 其中背景在第一个（最后面的）图层上绘制 - #top元素的背景出现在#bottom元素的背景上方 - 因为它出现在后面的源中，并且文本被绘制在背景上方的图层上（请参阅full details in the spec here）

通过向#top div添加定位（相对或绝对），我们可以确保它将被绘制在#bottom div上方（参见上述引用规范中的规则＃6）

Answer 2

这是您的工作代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>

  #bottom{
    background: blue;
    color: yellow;
    font-size: 45px;
    padding: 20px 0;

}

#top{
    background: white;
}
  </style>
</head>
<body>
  <div id="bottom">
    <div id="top">This is some text</div>
  </div>
</body>
</html>

顶部div覆盖底部div中的文本

2 个答案: