Bootstrap 4下拉菜单出现在其他元素后面

Question

我有问题bootstrap 4 dropdown menu，如果有足够的空间并且从下到上打开下拉菜单，则所有菜单看起来都很好，但是如果菜单从上到下打开，则某些菜单menu items确实出现在其他div后面。我该如何解决，为什么它仅在特定情况下发生？我尝试使用相对位置和z-index，但是它不起作用。

更新：@ZimSystem的回答很好，但是它不能解决我的问题，因此，我更新了代码以忠实地再现我面临的问题。

这是简化的代码：

$(document).ready(function() {
    $('.container').hover(function() {
        if (!$(this).find('.card').hasClass('flipped')) {
            $(this).find('.card').toggleClass('flipped')
        }
        $(this).find('.card').addClass('hovered');
    }, function() {
        var val = $(this).find('.card');
        $(this).find('.card').removeClass('hovered');
        setTimeout(function() {
            if (!val.hasClass('hovered')) {
                val.removeClass('flipped')
            }
        }, 1000);
    });

});

.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
.dropdown a{
    width: 100% !important;
}
.dropdown-item{
    color: black !important;
}
.dropdown-menu{
    height: auto !important;
}

.container {
  width: 150px !important;
  height: 150px;
  float: left;
  position: relative;
  margin: 3% 2.25% 0 2.25%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}


.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="main"><br>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink8">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

</div>

Answer 1

更新答案（根据赏金要求）

问题是，transform-style: preserve-3d;在.card被打破了Z顺序上的下拉。当popper.js动态定位下拉列表，它增加了translate3d(x,x,0)CSS的下拉列表。

由于z-order设置为0，因此下拉菜单被所有其他transform-style: preserve-3d;用于翻转动画的卡片隐藏。为了使它dropdown-menu具有适当的z-order位置，它还必须与translate3d...

.dropdown {
   margin-top: 30%;
   transform-style: preserve-3d;
   transform: translate3d(0,0,10px) !important;
}

.dropdown-menu{
    height: auto !important;
    position: relative !important;
    transform: translate3d(0,0,10px) !important;
}

此外，translate3d除非父元素也具有，否则z顺序将无法使用transform-style: preserve-3d;。所以，在这种情况下，transform-style: preserve-3d;必须加入所有的父元素（#main，.container，.back，.test，和.dropdown）..

Codeply 工作演示

原始答案

在z-index: 99999 !important;所有.dropdown导致下排叠加上排的下拉列表。删除z-index...

.dropdown{
    width: 100%;
    margin-top: 30%;
}

现在，由popper.js哪个位置控制下拉列表的位置，以执行某些意外操作。尝试使用data-flip="false"以防止下拉菜单覆盖其自己的按钮。

https://www.codeply.com/go/R0ePzWnvPC

.dropdown {
   margin-top: 30%;
   transform-style: preserve-3d;
   transform: translate3d(0,0,10px) !important;
}

.dropdown-menu{
    height: auto !important;
    position: relative !important;
    transform: translate3d(0,0,10px) !important;
}

.dropdown{
    width: 100%;
    margin-top: 30%;
}