Uzer Uzer - 6 months ago 21
HTML Question

Div is overlapping one another

overlapping

I'm trying to add another section under the jumbotron but it overlaps jumbotron for some reason..

Here is my code

http://www.bootply.com/IUd0GWEuAn

Answer

Section overlaps because you have applied position: absolute on jumbotron. Elements with absolute or fixed are taken out from the normal flow of DOM so they overlap with other elements. You can set your navbar with position: absolute rather than jumbotron and it will work.

Sample Code

<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...
}

I've updated your code, have a look at it. You can play with css to make it exactly according to your needs. Link