Question

我的标题中有一个dropdown menu，但它隐藏在section的后面。

Logout按钮在隐藏的名称的右上角。我试图在父div上添加以下内容，但不起作用：

overflow: visible !important;
position: relative;
z-index: 100;
display: block;

以下是我的html代码：

<div class="col-md-6 col-fix dropdown">
  <a href="javascript:void(0);" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <% if current_user.center_profile.logo.url.present? %>
      <%= image_tag current_user.center_profile.logo.url, alt: "Center Logo", class: "centre", width: "35", height: "35" %>
    <% else %>
      <%= image_tag 'ic-centerlogo.png', alt: "Center Logo", class: "centre", width: "35", height: "35" %>
    <% end %>  
    <div class="profile-name" title="<%= current_user.center_profile.name %>">
      <%= current_user.center_profile.name %>
    </div>
    <%= image_tag "ic-dropdown.png", alt: "Logout", class: "centre profile-pic", width: "10", height: "5" %>
  </a>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
    <%= link_to('Logout', destroy_user_session_path, method: 'delete', class: "dropdown-item", :data => {:confirm => 'Are you sure you want to logout?'}) %>
  </div>
</div>

下面是我的CSS：

.dropdown {
overflow: visible !important;
position: relative;
z-index: 100;
display: block;
@include desktop {
    text-align: right;
}
@include tab {
    text-align: right;
}
@include mobile {
    margin-top: 15px;
}
div {
    &.dropdown-menu {
        box-shadow: 0 0 6px 0 rgba(169, 169, 169, 0.25);
        border: 0 none;
        position:relative;
        background-color:#ffffff;
        height:40px !important;
        width:116px !important;
        margin-top: 10px;
        z-index: 30;
        overflow: auto;
        padding: 0;
        &:after {
            content:'';
            position: relative;
            width: 10px;
            height: 10px;
            transform: rotate(45deg); /* Prefixes... */
            top: -5px;
            right: 10px;
            box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
            z-index: -1;
        }
        .dropdown-item {
            padding: .8rem 0;
            background: #ffffff;
            display: block;
            border-radius: 8px;
        }
    }
}


I also want to remove the `up triangle` from the section which is just below the drop down icon in the top right in the screenshot.

Answer 1

进行以下更改以使其起作用：

我从dropdown类中删除了以下内容

overflow: visible !important;
position: relative;
z-index: 100;
display: block;

问题出在filter div中。它有z-index: 99999。我将其更改为0，即z-index: 0，它可以正常工作。

下拉菜单隐藏在该部分的后面

1 个答案: