css - 具有位置的子 div：相对导致问题

问题描述

我有一个下拉菜单，如下所示：

它在其他页面上工作得很好，但是在这个页面上，有一个 c3 图表，position: relative;它的类定义中有一个，我不知道如何更改它（它是直接从他们的 api 加载的）。这会导致下拉菜单在悬停在图表的 div 处时消失。

如果我在 chrome 开发者控制台中将它从“相对”更改为“静态”，它就可以正常工作。我的下拉 .css 有什么问题吗？或者有没有办法简单地覆盖位置：相对？

  li a, .dropbtn {
    color: white;
  }

  li a:hover, .dropdown:hover .dropbtn {
    background-color: #333;
  }

  li.dropdown {
    display: block;
    float: right;
  }
  li.dropdown:hover {
    display: block;
    float: right;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .dropdown-content a:hover {background-color: #f1f1f1}

  .dropdown:hover .dropdown-content {
    display: block;
  }

标签： cssd3.jscss-positionc3.js

尝试z-index: 9999在您的.dropdown-content课程中添加一个。这有什么作用吗？

此外，添加position: relative到您的li. 您需要下拉列表才能知道它附加到哪个父级（因为它是position: absolute）。执行此操作时，您可能需要根据您的宽度调整topand 。lefttop: 100%; left: 0

css - 具有位置的子 div：相对导致问题

问题描述

解决方案

推荐阅读