Ravi K Chowdary Ravi K Chowdary - 2 months ago 7
CSS Question

issue with Div flip overlapping issue

I have two different div flip options. But each one is overlapping to another one. how to resolve it.



$(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>




Answer

The lower vflipper1 flip is overlapping the top one due to the fact that you positioned the original elements relatively and then positioned the flipped versions absolutely within those. So, since the height of the first unflipped divs are smaller than the flipped versions they will show as overlapped since the flipped starts at the top of the unflipped for second one.

Notice what happens when you adjust the height of #newTab and #model divs to be 150px rather than 50px (the height of the flipped versions). This will get things to line up properly.

$(document).ready(function() {
  $('.vclick1').click(function() {
    $(this).closest('.vflipper1').toggleClass('vflip1');
  });

  $(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() {
      return $(this).next().html();
    }).get();
    $("#lbl2").html(arr.join(','));
  });

  $(":checkbox").change(function() {
    var arr = $(":checkbox:checked").map(function() {
      return $(this).next().html();
    }).get();
    $("#lbl1").html(arr.join(','));
  });

  $('.vclick').click(function() {
    $(this).closest('.vflipper').toggleClass('vflip');
  });
});
#newTab {
  height: 150px;
  width: 100%;
  position: relative;
}
#model {
  height: 150px;
  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;
  height: 150px;
}
.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: 0;
  left: 0;
  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: 0;
  left: 0;
  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/1.11.1/jquery.min.js"></script>

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

Comments