我试图将页面水平分割成两半。当我使用下面的代码时,它会拆分页面,但它也涵盖了我在页面上已经拥有的所有其他内容。还有另一种方法可以实现页面拆分,同时还能看到其他所有内容吗?
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: darkcyan;
}
#bottom {
bottom: 0;
background-color: white;
}
<div id="top"></div>
<div id="bottom"></div>
答案 0 :(得分:3)
您需要在z-index:-1;
ID。
#top and #bottom
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
z-index: -1;
}
#top {
top: 0;
background-color: darkcyan;
}
#bottom {
bottom: 0;
background-color: white;
}
&#13;
<div id="top"></div>
<div id="bottom"></div>
<p>
Hello
</p>
&#13;
答案 1 :(得分:0)
<div class="top_div">Contents</div>
<div class="bottom_div">Contents</div>
css:
.top_div{
height: 200px;
width: 370px;
background-color: blue
}
.bottom_div{
height: 200px;
width: 360px;
background-color: crimson;
}