Question

我在包装器div中有2个div。我想在div1下面堆叠div2，但它保留了叠加div 1。有人可以帮忙吗？

这是我的代码

CSS：

＆＃13;

@import url('http://fonts.googleapis.com/css?family=Wallpoet');
 body {
  margin: 0;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: blue;
}
.div1 {
  position: absolute;
  background-color: #bdc3c7;
  width: 100%;
  height: 75%;
  margin: 0;
  display: block;
  float: left;
  left: 0;
  top: 0;
}
.div2 {
  position: absolute;
  width: 100%;
  height: 25%;
  top: 0;
  left: 0;
  background-color: red;
}
.compass {
  position: relative;
  width: 180px;
  height: 190px;
  float: right;
  margin-top: -1%;
  overflow: hidden;
}


**HTML:**

＆＃13;

<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div class="div1">      
    </div>
    <div class="div2"></div>
  </div>
</body>

</html>

＆＃13;

尝试使用绝对位置的解决方案，但它不起作用。

Answer 1

将div2上的css更改为相对于底部的位置

.div2 {
  position: absolute;
  width: 100%;
  height: 25%;
  bottom: 0;
  left: 0;
  background-color: red;
}

Answer 2

您已使用绝对定位将div元素专门放置在同一位置。删除绝对定位（也是浮动），div元素排在另一个之下：

@import url('http://fonts.googleapis.com/css?family=Wallpoet');
html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  height: 100%;
  background-color: blue;
}
.div1 {
  height: 75%;
  background-color: #bdc3c7;
}
.div2 {
  height: 25%;
  background-color: red;
}

  <div class="wrapper">
    <div class="div1">      
    </div>
    <div class="div2"></div>
  </div>

Answer 3

请改为https://jsfiddle.net/2Lzo9vfc/143/

<强> CSS

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: blue;
}

.div1 {
    background: #bdc3c7;
    width: 100%;
    display: block;
    height: 75vh;
}

.div2 {
    background: red;
    width: 100%;
    height: 25vh;
    display: block;
}

Answer 4

您正在混合几种模式。如果您使用浮子，那么你不能将它与绝对定位混合...... 无论如何div是一个块标记，这意味着你的两个div应该堆叠，即使你没有为它们设置任何css属性，只需给出一个具体的高度，例如200px。

如果你想覆盖完整的浏览器视口，那就是我认为你想要的就足够了：

.wrapper {
  width: 100%;
  height: 100vh;
  background-color: blue;
}
.div1 {
   background-color: #bdc3c7;
   width: 100%;
   height: 75vh;
}
.div2 {
  width: 100%;
  height: 25vh;
  background-color: red;
}

将div叠加在另一个上面

4 个答案: