Html 如何使下拉列表显示在div前面？ 我已经安排了我的顶部导航，左边是3个不同的按钮，中间有一个长按钮，右边有一个3点按钮。p>

3个点是一个下拉菜单。但是，我的下拉菜单似乎出现在div面板容器后面。我在网上读到很多解决方案都说是由溢出引起的：隐藏。然而在我的例子中，我需要溢出：隐藏，以便左对齐、中对齐和右对齐。但是，这会导致我的下拉菜单出现在后面。你知道怎么解决这个问题吗？下面是我的代码：

css:

HTML:

开尔文





....
....
....

下面是隐藏下拉菜单的位置

---

问题似乎是，您的菜单

右上角的容器类已将属性
overflow
设置为
hidden
。这会导致下拉列表中高于容器的部分被隐藏。如果删除
溢出：隐藏部分，下拉列表应显示正确。
尝试
顶部标题上的
显示：flex
，并在
顶部右侧标题上添加
flex grow:1
。您应该能够实现标题对齐，而不会溢出：隐藏。同时从
topleft


正文{
身高：100%；
字体系列：“Trebuchet MS”、“Lucida Sans Unicode”、“Lucida Grande”、“Lucida Sans”、Arial、Sans serif；
填充：0；
保证金：0；
}
.页面容器{
高度：80vh；
利润上限：10px
}
.面板容器{
显示器：flex；
身高：100%；
弯曲方向：行；
边框：2倍实心#000；
溢出：自动；
xtouch动作：无；
}
.顶部标题{
边缘底部：7px；
显示器：flex；
}
托普赖特先生{
背景色：#1E90FF；
颜色：#fff；
字体大小：粗体；
字号：19px；
保证金：3倍；
边界半径：7px；
填充物：5px；
文本对齐：居中；
柔性生长：1；
}
左上角{
宽度：350px；
填充：3倍；
}
.资产净值选项卡.资产净值项目{
边框样式：无；
背景色：#1E90FF；
字体大小：粗体；
字体大小：12px；
保证金：1px；
边界半径：5px；
填充物：5px；
}
.导航选项卡.导航链接{
颜色：#fff；
}
.三点：之后{
内容：'\2807'；
颜色：#fff；
字号：17px；
}
.下拉菜单{
颜色：#000；
}









开尔文






    body {
      height: 100%;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      padding: 0;
      margin: 0;
    }

    .page-container {
      height: 80vh;
      margin-top: 10px  
    }

    .panel-container {
      display: flex;
      height: 100%;
      flex-direction: row;
      border: 2px solid #000;
      overflow: auto;
      xtouch-action: none;
    }

.....
....
/**********Alignment for top navigation*************/
    .topheader {
      margin-bottom:7px;
      width:100%;
    }

    .topright{
        width: auto;
        overflow:hidden;
        background-color:#1E90FF;
        color:#fff;
        font-weight:bold;
        font-size:19px;
        margin:3px;
        border-radius:7px;
        padding:5px;
        text-align:center;
    }

    .topleft{
        float:left;
        width:350px;
        padding:3px;
    }


    .nav-tab .nav-items {
      border-style: none;
      background-color:#1E90FF;
      font-weight:bold;
      font-size:12px;
      margin:1px;
      border-radius:5px;
      padding:5px;
    }

    .nav-tab .nav-link {
        color: #fff;
    }

    .threedots:after {
      content: '\2807';
      color: #fff;
       font-size:17px;
    }

<div class="page-container">

            <div class="topheader">
                <div class="topleft">
                    <ul class="nav nav-tab" id="myTab" role="tablist">
                        <li class="nav-items">
                            <a class="nav-link" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="one"
                            aria-selected="true">2019-01-01</a>
                        </li>
                        <li class="nav-items">
                            <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="two"
                            aria-selected="false">2019-01-02</a>
                        </li>
                        <li class="nav-items">
                            <a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="three"
                            aria-selected="false">2019-01-03</a>
                        </li>

                    </ul>
                </div>

                <div class="topright">
                    <div class="row">
                        <div class="col-md-11">
                            Kelvin
                        </div>
                        <div class="col-md-1">
                                    <div class="dropdown">
                                      <button class="btn" type="button" data-toggle="dropdown"><div class="threedots"></div>
                                      <span class="caret"></span></button>
                                      <ul class="dropdown-menu dropdown-menu-right">
                                        <li><a href="#">HTML</a></li>
                                        <li><a href="#">CSS</a></li>
                                        <li><a href="#">JavaScript</a></li>
                                      </ul>
                                    </div>

                        </div>
                    </div>
                </div>
            </div>

<div class="panel-container">

....
....
....