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>
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?
Advertisement
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; }
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.