下拉列表在使用变换进行悬停时被裁剪

Question

实际上我想实现一个下拉列表，其中每个卡都有三个点的图标，在单击图标后，我想要一个下拉列表，它应该在单击该图标后完全可见。对于悬停卡片，我在card-body类中使用transform: translateY(-3px);，对于下拉列表，我使用transform: translate3d(31px, 23px, 0px);。如果我悬停的卡片下面没有卡片，它可以正常工作

。但是如果我的卡片恰好在那张卡片下面，我点击了下拉列表的三个点图标，那么它就会显示如下

。谁能帮帮我。我认为代码片段不会正常运行，但你可以参考代码和图片来了解实际发生了什么，如果你想要更多的输入，请让我知道。提前感谢!！

​

.card-body{
    height:150px;
    background-color: white;
    border-radius: 10px;
    padding: 0.75rem 0.80rem 1rem 1.25rem;
    box-shadow: 1px 2px 9px 1px #A0A0A059;
    border: 0.25px solid #E6E6E6;
    border-radius: 7px;
    opacity: 1;
}
.card-body:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
}
.dropdown-menu {
    padding: 0;
    margin: 0;
    border-radius: 0;
    position: absolute; 
    transform: translate3d(31px, 23px, 0px); 
    top: 0px; 
    left: 0px; 
    will-change: transform;
}
.dropdown-item {
    position: relative;
    padding: 10px 10px;
    border-bottom: 1px solid #c2cfd6;
}

 <div class="card-body pb-0">
            <div class="row float-right ds-icon-container">
              <div class="btn-group float-right p-0">
                <button type="button" class="btn btn-circle p-0"
                  [ngClass]="pipelineOverview.status === 'active' ? 'btn-green' : 'btn-red'">
                </button>
              </div>
              <div class="btn-group float-right p-0">
                <button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <!-- <i class="icon-settings"></i> -->
                  <img class="three-dots" src="../../assets/icons/icons8-menu-vertical-50.png" alt="Vertical Dots">
                </button>
                <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
                  <a class="dropdown-item"><i class="ds-icon-start"></i>Start</a>
                  <a class="dropdown-item"><i class="ds-icon-restart"></i>Restart</a>
                  <a class="dropdown-item"><i class="ds-icon-stop"></i>Stop</a>
                  <a class="dropdown-item" (click)="populateDataInEdit(pipelineOverview)"><i class="ds-icon-edit" ></i>Edit/Preview</a>
                  <a class="dropdown-item"><i class="ds-icon-healthcheck"></i>Health Check</a>
                </div>
              </div>
            </div>
          </div>

​

Answer 1

看起来像是z索引的问题：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

因为元素是稍后呈现的，所以它们堆叠在之前呈现的元素之上。您的菜单嵌套在较低的平面中，并显示在其他元素的下方。将z-index增加到比您希望它重叠的其他值更高的值，应该可以解决问题。

tl;dr：

.dropdown-menu {
    z-index:9999
}

Answer 2

尝试将z-index属性添加到下拉菜单项或菜单本身...你甚至还可以在transform中为元素定义Z轴，如果它不起作用，那么也可以尝试overflow属性...请查收！