Question

我有一个容器div，里面有很多项目（div）。当我将这些物品悬停时，会显示一个小模态。问题是这个模态应该在容器之上，但事实并非如此，即使它具有更高的z-index。

模态类是：csgo-item - title

我的Html：

<div class="container-trade panel panel-default">

    <div class="csgo-item csgo-item--rare"">

         <div class="csgo-item--title">
               <!--Random Stuff Here -->
           </div>
     </div>

 </div>

我的Css：

.container-trade{
    background-color: rgba(255, 240, 240, 0.5) !important;
    color: #fff;
    border: 0px !important;
    border-radius: 3px;
    margin: 0;
}

.csgo-item{
    min-height: 80px;
    background: rgba(0, 0, 0, .05);
    float: left;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    border-right: 1px solid rgba(0, 0, 0, .05);
}

.csgo-item--title{
width: 370px !important;
    left: -132px !important;
    top: 95px !important;
    min-height: 150px !important;
    padding: 15px 15px 15px 15px;
    border-radius: 3px;
    height: fit-content;
    background: rgb(66, 60, 70);
    box-shadow: 0px 1px 8px #2d2d2d;
    visibility:visible;
    z-index:999;
}

这就是发生的事情：https://gyazo.com/fa9948d2d6f7ddac7bce8e2743d56053

我尝试在不同的元素上更改位置和z-index，但它不起作用。我该怎么办？

隐藏在容器后面的模态窗口

0 个答案: