CSS 将 Div 置于另一个 Div 之上

Question

我有两个 div，我试图将它们堆叠在一起，但我想要放在最上面的那个没有显示。我希望蓝色背景 div 位于红色背景 div 之上。有什么建议吗？我之所以要覆盖蓝色div，是因为容器是一个居中的网格，我希望红色div作为页面前半部分的背景。

JSFIDDLE

CSS

.buddy {
    width: 50%;
    height: 629px;
    display: inline-block;
    position: relative;
background: red;
  }

  .buddy-content {
    position: absolute;
    top: -629px;
    z-index: 10;
background: blue;
  }
 .container {
    max-width: 1000px;
    margin: 0 auto;
    overflow:hidden;
    position:relative;
    padding: 0 10px;}

Answer 1

您已经使第二个 div 成为绝对的，因此您不需要为 top 提供负值。第二个 div 被隐藏了，因为你 top -629px;尝试制作 top:0 看看。以及您当前的代码。移除隐藏的溢出并像这样放置 z-index :

.buddy {
        width: 50%;
        height: 629px;
        display: inline-block;
        position: relative;
     z-index:9;
    background: red;
      }

      .buddy-content {
        position: absolute;
        top: -629px;
        z-index: 10;
    background: blue;
      }
.container {
  max-width: 1000px;
  margin: 0 auto;
    width:200px;
    height:200px;
  position:relative;
  padding: 0 10px;
}