Div 不堆叠，而是重叠

Question

我正在尝试将包含按钮的 div 堆叠在另一个包含使用 turnjs 创建的翻页簿的 div 之下。这是网页的样子： https://imgur.com/a/Nwp3Mgi 。我想将按钮放在动画书下面，但它们会重叠。

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

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

如何确保包含按钮的 div 始终位于包含动画书的 div 下方？

Answer 1

在您的代码中，buttonsDiv 实际上位于动画书下方，但您使用 top CSS 将动画书移动到其原始位置下方，因此它看起来像是重叠的。

不要在 CSS 中使用 top: 100px，而是使用 margin-top: 100px;

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

CSS 解释引用自：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; - 顶部属性构成元素的上边缘移动 above/below 其正常位置。

Div 不堆叠，而是重叠

Divs not stacking, instead is overlapping

html

javascript

css

jquery

turnjs