[Dropdown在使用变换进行悬停时被裁剪

Question

实际上，我想实现一个下拉菜单，其中每个卡都具有三个点图标，并且在单击该图标后，我希望下拉菜单在单击该图标后应该完全可见。悬停卡时，我使用transform: translateY(-3px);类中的card-body；下拉菜单中，我使用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-index增大到高于您希望其重叠的其他索引的值，应该可以解决此问题。

tl; dr：

.dropdown-menu {
    z-index:9999
}