html - Div互相重叠

我正在尝试在巨型轰炸机下添加另一部分，但由于某种原因它与巨型轰炸机重叠。

这是我的代码

http://www.bootply.com/IUd0GWEuAn

最佳答案

该部分重叠，因为您已在jumbotron上应用了position: absolute。具有absolute或fixed的元素从DOM的常规流中取出，因此它们与其他元素重叠。您可以将navbar设置为position: absolute而不是jumbotron，它将起作用。

样例代码

<nav class="navbar">
     // navigation
</navbar>
<div class="jumbotron">
    // jumbotron
</div>
<div class="next-section">
    // next section
</div>

body {
    position: relative;
}

.navbar {
    position: absolute;
    z-index: 10;
    right: 0;
    left: 0;
    top: 0;
}

.jumbotron {
    height: 100vh;
    width: 100%;
}

.next-section {
  // styling will go here...
}

我已经更新了您的代码，看看吧。您可以使用CSS使其完全根据您的需要进行播放。 Link