Question

嗨，当我徘徊在我想要的盒子翻转180并保持z-index＆＃39; d在它们后面的盒子顶部。我如何实现这一目标才能在顶部显示我将悬停的z-index设置为100，但是当我将其悬停时，它就会移到框后面。我也尝试过渡延迟，我仍然遇到同样的问题。有人能帮助我吗？

<!DOCTYPE html>
<html>
<head>
<style> 

.boxfront {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: green;
  backface-visibility: hidden;
}

.container {
display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: transform, z-index;
  transition-duration: 2s, 10s;
  transition-delay:0s,0s;
  transform-style: preserve-3d;



}

.container:hover  {
  transform: scale(2, 2) rotateY(180deg);
z-index: 100;



}






</style>
</head>
<body>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
<div class="container">
  <div class="boxfront"></div>

</div>
</body>
</html>

Answer 1

试试这个：

.container {
  z-index: 100;
}

.container:hover  {
  z-index: 200;
}

https://jsfiddle.net/uop6ehac/

div框的z-index问题

1 个答案: