<div>页面拆分阻止页面上的其他内容

时间:2017-05-05 04:12:06

标签: html css

我试图将页面水平分割成两半。当我使用下面的代码时,它会拆分页面,但它也涵盖了我在页面上已经拥有的所有其他内容。还有另一种方法可以实现页面拆分,同时还能看到其他所有内容吗?

#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>

2 个答案:

答案 0 :(得分:3)

您需要在z-index:-1; ID。

中添加#top and #bottom

&#13;
&#13;
#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;
&#13;
&#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;
}