Html 悬停时引导列相互重叠

首先，这里是一个JSFIDLE演示：

我目前正在使用bootstrap的网格系统以4行的形式显示一组项目。当您将鼠标悬停在某个项目上时，该项目将翻转到后面并显示更多详细信息。它工作得很好，当您当前悬停的项目正下方有一个项目时，问题就出现了，下面的项目会阻塞或覆盖在悬停的项目上。很抱歉，如果我的解释令人困惑，JSFiddle演示将让您明白我的意思

我一直试图用z-index解决这个问题，确保位置没有设置为默认值，但没有效果。我已经尝试解决这个问题好几天了。任何帮助都将不胜感激

HTML:

---

您需要在外部容器处设置z索引：

.flip-container:hover{
  position:relative;
  z-index:1;
}

演示：

.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);
}

.flip-container:hover{
  position:relative;
  z-index:1;
}