1
我有两个不同的div翻转选项。但是每一个都与另一个重叠。如何解决它。问题Div触发重叠问题
$(document).ready(function() {
$('.vclick').click(function() {
$(this).closest('.vflipper').toggleClass('vflip');
});
});
$(function() {
$(":checkbox").change(function() {
var arr = $(":checkbox:checked").map(function() {
return $(this).next().html();
}).get();
$("#lbl1").html(arr.join(','));
});
});
$(document).ready(function() {
$('.vclick1').click(function() {
$(this).closest('.vflipper1').toggleClass('vflip1');
});
});
$(function() {
$(":checkbox").change(function() {
var arr = $(":checkbox:checked").map(function() {
return $(this).next().html();
}).get();
$("#lbl2").html(arr.join(','));
});
});#newTab {
height: 50px;
width: 100%;
position: relative;
}
#model {
height: 50px;
width: 100%;
position: relative;
}
.vfront {
background-color: lightgrey;
}
.vfront1 {
background-color: lightgrey;
}
.vback {
background-color: lightblue;
}
.vback1 {
background-color: lightblue;
}
.vflipper {
position: absolute;
perspective: 600px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.vflipper1 {
position: absolute;
perspective: 600px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
}
.vflipper .vfront,
.vflipper .vback {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-o-transition: transform .6s ease-in-out;
-moz-transition: transform .6s ease-in-out;
-webkit-transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out;
}
.vflipper1 .vfront1,
.vflipper1 .vback1 {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-o-transition: transform .6s ease-in-out;
-moz-transition: transform .6s ease-in-out;
-webkit-transition: transform .6s ease-in-out;
transition: transform .6s ease-in-out;
}
/* vertical flipping stuff */
.vflipper1 {
-webkit-transform-origin: 100% center;
-moz-transform-origin: 100% center;
-ms-transform-origin: 100% center;
transform-origin: 100% center;
}
.vflipper1 .vfront1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 200;
width: inherit;
height: inherit;
}
.vflipper1.vflip1 .vfront1 {
z-index: 900;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vflipper1 .vback1 {
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
width: inherit;
height: 150px;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.vflipper1.vflip1 .vback1 {
z-index: 1000;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.vflipper {
-webkit-transform-origin: 100% center;
-moz-transform-origin: 100% center;
-ms-transform-origin: 100% center;
transform-origin: 100% center;
}
.vflipper .vfront {
position: absolute;
top: 0px;
left: 0px;
z-index: 200;
width: inherit;
height: inherit;
}
.vflipper.vflip .vfront {
z-index: 900;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vflipper .vback {
position: absolute;
top: 0px;
left: 0px;
z-index: 800;
width: inherit;
height: 150px;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.vflipper.vflip .vback {
z-index: 1000;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#lbl {
display: inline;
}
#lb2 {
display: inline;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="newTab" class="vflipper">
<div class="vclick vfront">
<div class="pull-left">Model :</div>
<label id="lbl1"></label>
</div>
<div class="vback ">
<input type="checkbox" class="chk" />
<label>One</label>
<input type="checkbox" class="chk" />
<label>Two</label>
<input type="checkbox" class="chk" />
<label>Three</label>
<input type="checkbox" class="chk" />
<label>Four</label>
<button type="button" class="vclick btn btn-primary">Save</button>
</div>
</div>
<br>
<div id="model" class="vflipper1">
<div class="vclick1 vfront1">
<div class="pull-left">Model :</div>
<label id="lbl2"></label>
</div>
<div class="vback1 ">
<input type="checkbox" class="chk" />
<label>One</label>
<input type="checkbox" class="chk" />
<label>Two</label>
<input type="checkbox" class="chk" />
<label>Three</label>
<input type="checkbox" class="chk" />
<label>Four</label>
<button type="button" class="vclick1 btn btn-primary">Save</button>
</div>
</div>
</body>
</html>预览： -
翻转第一个div之后（模型）
这里问题是，当我翻转第一个Div时，它被完美翻转，但第二个div显示在翻转的第一个div的顶部。但翻转的div应该在第二个div上面。
仍然面临着同样的问题。我无法解决它。您的帮助非常感谢。 – Ravikanth