我正试图将一个包含按钮的div堆叠在另一个包含使用turnjs创建的动画书的div下。网页是这样的：https://i.stack.imgur.com/LB7ci.jpg。我想把按钮放在活页夹下面，但它会重叠。
这是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之下？
在您的代码中，按钮div实际上位于动画书下方，但您使用topCSS将动画书移动到其原始位置下方，因此看起来像是重叠的。
使用margin-top: 100px;而不是在CSS中使用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属性影响已定位元素的垂直位置。此属性对未定位的元素没有影响。
如果
position: relative;-顶部属性使元素的顶部边缘以在其正常位置之上/之下移动。