Skip to content

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: . 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" "">
<html xmlns="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<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" />

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

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


            // Width

            width: theWindowWidth*0.9,

            // Height


            // Elevation

            elevation: 50,

            // Enable gradients

            gradients: true,

            // Auto center this flipbook

            autoCenter: true



  function thePreviousPage()

  function theHomePage()

  function theNextPage()



This is the css:


.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%;

  transform: translate(-50%, -50%);

.flipbook-viewport .page{
    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;

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

    position: relative;
    left: 45%;

.buttonsDiv {
    position: relative;

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



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;

CSS explanations quoted from:

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.