首先，这里有一个JSFiddle演示：https://jsfiddle.net/y9bp4oat/
我目前正在使用 bootstrap 的网格系统以 4 行显示一堆项目。当您将鼠标悬停在项目上时，它会翻转到后面并显示更多详细信息。它效果很好，当当前悬停的项目正下方有一个项目时，问题就来了，下面的项目会阻止或覆盖在悬停的项目上。很抱歉，如果我的解释令人困惑，JSFiddle 演示会让你明白我的意思。
我一直在尝试使用 z-index 解决此问题，确保该位置未设置为默认值但无济于事。几天来我一直在尝试解决此问题。任何帮助将不胜感激。
.HTML：
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">SeeMore</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See
More</button>
<button href="#" type="button" class="btn btn-primary btn
sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.CSS：
.mystyle{
height: 90px;
width: 254px;
color: white;
font-size: smaller;
padding: 5px 5px 5px 5px;
border-radius: 10px;
margin: 5px 1% 5px 1%;
float: left;
position: relative;
transition: 1s;
-webkit-transition: 1s;
text-align: left;
overflow: hidden;
background-color: white;
z-index: 5;
}
.flip-container{
perspective: 1000px;
}
.flip-container:hover .flipper ,
.flip-container.hover .flipper{
transform: rotateY(180deg);
}
.flip-container:hover .flipper .mystyle,
.flip-container.hover .flipper .mystyle{
height: 150px;
width: 254px;
background-color: grey;
color: white;
position: relative;
z-index: 5;
margin-bottom: 100px;
}
.flip-container,
.front,
.back{
height: 100px;
width: 254px;
}
.flipper{
transition: 1s;
transform-style: preserve-3d;
}
.front,
.back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
您需要在外部容器处设置 z 索引：
.flip-container:hover{
position:relative;
z-index:1;
}
演示：https://jsfiddle.net/lotusgodkk/r62wxp4L/3/