使用变换进行悬停时裁剪下拉菜单

Posted 2023-05-08

【中文标题】使用变换进行悬停时裁剪下拉菜单

【英文标题】：Dropdown is cropped while doing hover using transform

【发布时间】：2020-10-04 14:23:10

【问题描述】：

实际上我想实现一个下拉菜单，其中每张卡片都有三个点图标，点击图标后，我想要一个下拉菜单，点击该图标后应该完全可见。对于悬停卡片，我在 card-body 类中使用 transform: translateY(-3px);，对于下拉菜单，我使用 transform: translate3d(31px, 23px, 0px);。如果我悬停在 的卡片下方没有卡片，它可以正常工作。但是，如果我的卡片正好在该卡片下方，然后单击三点图标以进行下拉，则其显示如下 。有人可以帮帮我吗。我认为代码 sn-p 将无法正常运行，但您可以参考代码和图片以了解实际发生的情况如果您需要更多输入，请告诉我。提前致谢！！

.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" >
                </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>

【问题讨论】：

您必须使用 z-index 将位置“相对”设置为父容器，然后将绝对位置设置为下拉内容。那么它肯定会起作用

【参考方案1】：

看起来像一个 z-index 问题：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

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

tl;博士：

.dropdown-menu 
    z-index:9999

【参考方案2】：

尝试将z-index属性添加到下拉菜单项或菜单本身...您甚至可以为transform中的元素定义Z轴，如果它不起作用，请尝试@ 987654323@属性也...请检查它！

【讨论】：

谢谢，但 z-index 不起作用。你能解释一下在哪里添加这些其他属性吗？

您必须使用 z-index 将位置“相对”设置为父容器，然后设置下拉绝对位置。那么它肯定会起作用

问题是我不能通过你的 sn-p 来判断你的 CSS ......你能分享一个小提琴吗？或尝试改进 snnipet 的答案，以便我可以编辑它