将div放在div下

Question

可能是一个非常简单的解决方案。

我有两个容器div

的

的

.topwrap{
    position:relative;
    top:100px;
    background:#00C;

}

的

和

的

的

.lowerwrap{
    position:relative;
    top:100px;
    background:#00C;
}

的

但.lowerwrap出于某种未知原因一直保持在.topwrap之上。在这两个容器中是正确定位的图像等。它只是我不能.lowerwrap直接下面.topwrap

很抱歉，如果我没有正确解释这一切。

亲切的问候

（完整代码）

的

的

/*---------------------------- Header ----------------------------*/
.headerwrap{
    position:relative;
}
.header{
    position:relative;
    width:100%;
    z-index:1;
}
.header img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
.logo{
    position: absolute;
    float:left;
    width:15%;  
    top:5%;
    left:43%;
    z-index:10;
}
.logo img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*---------------------------- Main Work ----------------------------*/
.menu{
    width:100%; 
    top:0px;
    z-index:200;
}
ul {
    margin: 0 auto;
    padding:0 0 5px 0;
    list-style-type: none;
}
li{
    display: inline;
    list-style:none;
    padding:1%;
    transition: all 300ms;
}
li a{
    color:#A11D22;
    transition:300ms;
}
li a:hover {
    color:#999;
}
.menutxt{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size:2.5vw;
    color:#A11D22;
    font-weight:bold;
    z-index:3000;
}
/*----------------------------Top ----------------------------*/
.topwrap{
    position:relative;
    background:#00C;
    height:auto;
}
.face{
    position:relative;
    width:20%;
    float:right;
    right:15%;
    background:#00C;
}
.face img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
.speech{
    position:relative;
    width:50%;
    float:right;
    right:15%;
    background:#00C;
}
.speech img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:100%;
}
/*----------------------------Lower----------------------------*/
.lowerwrap{
    position:relative;
    background:#00C;
}

的

的

的

<!--===================================================Header===================================================!-->
    <div class="headerwrap">
        <div class="header">
                <img src="images/header.png" />
            <div class="logo">
                <img src="images/logo.png" />
            </div><!--close logo-->
            <div class="menu">
                <ul class="menutxt">
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">PORTFOLIO</a></li>
                    <li><a href="manga.html">CONTACT</a></li>                 
                </ul>
            </div><!--close menu-->
        </div><!--close header-->
    </div><!--close headerwrap-->
 <!--===================================================Top===================================================!-->
    <div class="topwrap">
        <div class="face">
            <img src="images/face.png"/>
        </div><!--close face-->
        <div class="speech">
            <img src="images/speech.png"/>
        </div><!--close speech-->
    </div><!--close topwrap-->
<!--===================================================Lower===================================================!--> 
    <div class="lowerwrap">
        <p>dsadsadasd</p>
    </div><!--close topwrap-->   
</body>
</html>

的

Answer 1

你必须使用z-index来实现这一目标。请记住，具有较高z-index的div将位于顶部，因此我建议为.topwrap和z-index添加z-index：2：1 .lowww您可以在这里阅读更多内容：http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

我不会使用top，怎么样：

.topwrap{
    clear: both;
    position:relative;
    float: left;
    background:#EEE;
    margin-top: 100px;
}

 .lowerwrap{
    position:relative;
    float: left;
    background:#555;
    display: block;
}

我在这里创造了一个简单的小提琴： https://jsfiddle.net/6xj5snv2/