如何使下拉菜单出现在div的前面？

Question

您好，我在顶部导航的安排方式是，左边包含3个不同的按钮，中间包含一个长按钮，而右边包含3个点按钮。

3个点是一个下拉菜单。但是，我的下拉菜单似乎出现在div面板容器的后面。我读过许多在线解决方案，它们说是由溢出引起的：但是隐藏起来，在我的情况下，我需要把它隐藏起来才能使左，中和右对齐起作用。但是，这导致我的下拉菜单出现在后面。知道如何解决吗？下面是我的代码：

css：

    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;
    }

HTML：

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

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

下面是隐藏下拉菜单的地方

Answer 1

在display: flex上尝试topheader，然后在flex-grow: 1 div上添加topright。您应该能够实现标题对齐而不会发生溢出：隐藏。同时从float: left

中删除topleft

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;
}

.topheader {
  margin-bottom: 7px;
  display: flex;
}

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

.topleft {
  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;
}

.dropdown-menu {
  color: #000;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<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>

Answer 2

问题似乎是，菜单topright的容器类已将属性overflow设置为hidden。这导致下拉菜单中高于容器的部分被隐藏。如果删除overflow:hidden部分，则下拉列表应显示正确。