Question

我有两个div，我试图叠加在一起，但我想要的顶部没有显示。我希望蓝色背景div位于红色背景div的顶部。有什么建议？我想覆盖蓝色div的原因是因为容器是一个居中的网格，我希望红色div是页面前半部分的背景。

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

如果您可以像这样更新您的代码，它可以解决问题：

演示：https://jsfiddle.net/kt77cp3e/7/

CSS：

html, body {
    height:100%;
    width:100%:
}
.container {
    width:50%;
    height:100%;
    background:red;
    position:relative;
}
.container>div {
    position:relative;
    left:0;
    right:0;
}
.container>div:first-child {
    top:0;
    height:50%;
    background:blue
}
.container>div:last-child {
    bottom:0;
    height:50%;
    background:green
}

HTML：

<div class="container">
    <div></div>
    <div></div>
</div>

更新：考虑到最新更新的代码，我认为您应该从容器样式中删除overflow:hidden。那应该是诀窍

您应该在.container div上设置维度。 CSS：

.container {
    position:relative;
    width:100px; //You may modify these values
    height:100px
}

演示：https://jsfiddle.net/kt77cp3e/1/

Answer 2

你已经使第二个div成为绝对的，所以你不需要为top提供负值。第二个div是隐藏因为你顶-629px;尝试制作顶部：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;
}

Answer 3

＆＃13;

.buddy {
        width: 50%;
        height: 629px;
        display: inline-block;
        position: absolute;
    background: red;
      }
      
      .buddy-content {
        position: absolute;
        
        z-index: 10;
    background: blue;
      }

＆＃13;

<div class="buddy BlueGradient">
  &nbsp;
</div>
<div class="container">
  <div class="buddy-content">
  ROGER
  </div>
</div>

＆＃13;

https://jsfiddle.net/kt77cp3e/6/

只需将z-index：high添加到要在顶部显示的div并将z-index设置为低到另一个..

蚂蚁有一件事你的代码工作得很好只是你需要删除＆＃34;顶部：-629px;＆＃34; 那个东西不允许蓝色div在顶部，只是它显示在-629 px位置.. !!!!

Answer 4

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


<div class="container">
    <div class="buddy BlueGradient">&nbsp;
        <div class="buddy-content">ROGER</div>
    </div>
</div>

这会将带有蓝色背景的文字“Roger”置于红色背景之上

CSS位置Div超过另一个Div

CSS

4 个答案: