javascript - Divs 不堆叠,而是重叠
问题描述
我正在尝试将包含按钮的 div 堆叠在另一个 div 下,该 div 包含使用 turnjs 创建的翻书。这是网页的样子: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 下方?
解决方案
在您的代码中,buttonsDiv 实际上位于翻书下方,但是您使用top
CSS 将翻书移动到其原始位置下方,因此看起来像是重叠的。
不要top: 100px
在 CSS 中使用,而是使用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 属性影响定位元素的垂直位置。此属性对非定位元素没有影响。
If
position: relative;
- top 属性使元素的顶部边缘移动到其正常位置的上方/下方。
推荐阅读
- javascript - 使用莫里斯图表数据源馈送
- python - 通过带有 Python3 的 SPI 将 RasberryPi 与 TI ADS1298 连接起来
- python - Seaborn Bars 未正确聚类
- javascript - 将数据从 Vue 组件传递到 Vuex 存储
- machine-learning - 在 sklearn 方法中更改 random_state(在调整超参数之后)提供不同的准确性
- symfony - ORO 平台 - 如何将相关实体的集合传递给 datagrid 列模板?
- java - 如何检测 Canvas 尺寸是否对于图形系统来说太大?
- python - SciPy 差分进化:即使工人 = -1 也不能在多核上运行
- amazon-web-services - 如何将根域重定向到 AWS route53 中的子域?
- oracle - 带有 LDAP 的 Oracle JDBC-URL 到 OLE DB 连接字符串 - 如何?