Divs not stacking, instead is overlapping

Question

Divs not stacking, instead is overlapping

98 Views Asked by mmm000 At 23 July 2021 at 06:50

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://i.stack.imgur.com/LB7ci.jpg . 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>

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

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

Original Q&A

There are 1 best solutions below

**zhuhang.jasper** · Accepted Answer · 2021-07-23T07:00:22.937000

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

Divs not stacking, instead is overlapping

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in JQUERY

Related Questions in CSS

Related Questions in TURNJS

Trending Questions

Popular # Hahtags

Popular Questions