Divs not stacking, instead is overlapping

I am trying to stack a div containing buttons under another div that contains a flipbook created using turnjs. This is how the webpage looks like: https://imgur.com/a/Nwp3Mgi . I want to position the buttons under the flipbook, but it will overlap instead.

This is the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<link rel="stylesheet" href="css/test.css" />
</head>
<body>

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div style="background-image:url(brochure/Brochure_Main.jpeg)"></div>
            <div style="background-image:url(brochure/Brochure_Mobile_Ordering.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Automobile.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Beauty_Wellness.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Food_Beverage.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Hair_Salon.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Minimart.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Mobile_Phone_Shop.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Retail.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Wholesale.jpg)"></div>
        </div>  
    </div>
</div>

<div class="buttonsDiv">
<div class="buttons">
    <button type="button" onclick="thePreviousPage()" class="button">Previous</button>
    <button type="button" onclick="theHomePage()" class="button">Home</button>
    <button type="button" onclick="theNextPage()" class="button">Next</button>
</div>
</div>


<script type="text/javascript">
theWindowHeight = $(window).height();
theWindowWidth = $(window).width();
    // Create the flipbook

  $('.flipbook').turn({

            // Width

            width: theWindowWidth*0.9,

            // Height

            height:theWindowHeight*0.7,

            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true

    });

console.log($('.flipbook').turn('size'));

  function thePreviousPage()
  {
    $('.flipbook').turn('previous');
  }

  function theHomePage()
  {
    $('.flipbook').turn('page',1);
  }

  function theNextPage()
  {
    $('.flipbook').turn('next');
  }

</script>

</body>
</html>

JavaScript
​x
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<link rel="stylesheet" href="css/test.css" />
</head>
<body>
​
<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div style="background-image:url(brochure/Brochure_Main.jpeg)"></div>
            <div style="background-image:url(brochure/Brochure_Mobile_Ordering.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Automobile.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Beauty_Wellness.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Food_Beverage.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Hair_Salon.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Minimart.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Mobile_Phone_Shop.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Retail.jpg)"></div>
            <div style="background-image:url(brochure/Brochure_POS_Wholesale.jpg)"></div>
        </div>  
    </div>
</div>
​
<div class="buttonsDiv">
<div class="buttons">
    <button type="button" onclick="thePreviousPage()" class="button">Previous</button>
    <button type="button" onclick="theHomePage()" class="button">Home</button>
    <button type="button" onclick="theNextPage()" class="button">Next</button>
</div>
</div>
​
​
<script type="text/javascript">
theWindowHeight = $(window).height();
theWindowWidth = $(window).width();
    // Create the flipbook
​
  $('.flipbook').turn({
​
            // Width
​
            width: theWindowWidth*0.9,
​
            // Height
​
            height:theWindowHeight*0.7,
​
            // Elevation
​
            elevation: 50,
​
            // Enable gradients
​
            gradients: true,
​
            // Auto center this flipbook
​
            autoCenter: true
​
    });
​
console.log($('.flipbook').turn('size'));
​
  function thePreviousPage()
  {
    $('.flipbook').turn('previous');
  }
​
  function theHomePage()
  {
    $('.flipbook').turn('page',1);
  }
​
  function theNextPage()
  {
    $('.flipbook').turn('next');
  }
​
</script>
​
</body>
</html>
​

This is the css:

body{
    overflow:hidden;
    background-color:#fcfcfc;
    margin:0;
    padding:0;
    
}

.flipbook-viewport {
    overflow: hidden;
    width: 100%;
    height: 100% !important;
    overflow-anchor: none;
    top: 100px;
    position: relative;
}
.flipbook-viewport .container {
    position: relative;
    margin: auto;
    top: 45%;
    left: 37%;
    height: 100%;
    width: 100%;
}
.flipbook-viewport .flipbook {
    top: -30%;
  left: -32%;
}

.flipbook
{
  transform: translate(-50%, -50%);
}

.flipbook-viewport .page{
    background-color:white;
    background-repeat:no-repeat;
    background-size:100% 100%;
}

.flipbook .page{
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
    box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin:0;
}

.flipbook-viewport .shadow{
    -webkit-transition: -webkit-box-shadow 0.5s;
    -moz-transition: -moz-box-shadow 0.5s;
    -o-transition: -webkit-box-shadow 0.5s;
    -ms-transition: -ms-box-shadow 0.5s;

    -webkit-box-shadow:0 0 20px #ccc;
    -moz-box-shadow:0 0 20px #ccc;
    -o-box-shadow:0 0 20px #ccc;
    -ms-box-shadow:0 0 20px #ccc;
    box-shadow:0 0 20px #ccc;
}

.button{
    position: relative;
    left: 45%;
}

.buttonsDiv {
    position: relative;
    display:block; 
}

JavaScript
 
body{
    overflow:hidden;
    background-color:#fcfcfc;
    margin:0;
    padding:0;
    
}
​
.flipbook-viewport {
    overflow: hidden;
    width: 100%;
    height: 100% !important;
    overflow-anchor: none;
    top: 100px;
    position: relative;
}
.flipbook-viewport .container {
    position: relative;
    margin: auto;
    top: 45%;
    left: 37%;
    height: 100%;
    width: 100%;
}
.flipbook-viewport .flipbook {
    top: -30%;
  left: -32%;
}
​
.flipbook
{
  transform: translate(-50%, -50%);
}
​
.flipbook-viewport .page{
    background-color:white;
    background-repeat:no-repeat;
    background-size:100% 100%;
}
​
.flipbook .page{
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
    box-shadow:0 0 20px rgba(0,0,0,0.2);
}
​
.flipbook-viewport .page img{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin:0;
}
​
.flipbook-viewport .shadow{
    -webkit-transition: -webkit-box-shadow 0.5s;
    -moz-transition: -moz-box-shadow 0.5s;
    -o-transition: -webkit-box-shadow 0.5s;
    -ms-transition: -ms-box-shadow 0.5s;
​
    -webkit-box-shadow:0 0 20px #ccc;
    -moz-box-shadow:0 0 20px #ccc;
    -o-box-shadow:0 0 20px #ccc;
    -ms-box-shadow:0 0 20px #ccc;
    box-shadow:0 0 20px #ccc;
}
​
.button{
    position: relative;
    left: 45%;
}
​
.buttonsDiv {
    position: relative;
    display:block; 
}
​

How do I ensure that the div containing the buttons will always be below the div containing the flipbook?

Answer

In your code, the buttonsDiv actually located under the flipbook, but you used top CSS to move the flipbook below its original location, so it looks like overlapping.

Instead of using top: 100px in CSS, use margin-top: 100px;

.flipbook-viewport {
    overflow: hidden;
    width: 100%;
    height: 100% !important;
    overflow-anchor: none;
    margin-top: 100px;   <---
    position: relative;
}

JavaScript
 
.flipbook-viewport {
    overflow: hidden;
    width: 100%;
    height: 100% !important;
    overflow-anchor: none;
    margin-top: 100px;   <---
    position: relative;
}
​

CSS explanations quoted from: https://www.w3schools.com/cssref/pr_pos_top.asp

CSS top property

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

If position: relative; – the top property makes the element’s top edge to move above/below its normal position.

Advertisement

Answer