title: Bootstrap 4 dropdown menu appears behind other elements
body: <p>I´m having problems with <code>bootstrap 4 dropdown menu</code>, if there is enough space and the dropdown is opened from bottom to top all menu appears fine, but if the menu is opened from top to bottom some <code>menu items</code> do appear behind the other divs. How can I fix that and why it happens only in a certain case? I tried with position relative and z-index but it doesn´t work.<br></p>
  <blockquote>
  <p><strong>Update</strong>: @ZimSystem answer is fine, but it didn´t fix my problem, so I have updated my code to faithfully reproduce the issue I was facing.</p>
  </blockquote>
  <p>Here is the simplified code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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);
      });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  
  &lt;div id="main"&gt;&lt;br&gt;
  
  &lt;section class="container"&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;
              &lt;p&gt;Test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;div class="test"&gt;
                  &lt;div class="dropdown"&gt;
                      &lt;a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Test Dropdown
        &lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuLink1"&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 1&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 2&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 3&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 4&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 5&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 6&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 7&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 8&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 9&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section class="container"&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;
              &lt;p&gt;Test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;div class="test"&gt;
                  &lt;div class="dropdown"&gt;
                      &lt;a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Test Dropdown
        &lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuLink2"&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 1&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 2&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 3&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 4&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 5&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 6&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 7&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 8&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 9&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  
  
  &lt;section class="container"&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;
              &lt;p&gt;Test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;div class="test"&gt;
                  &lt;div class="dropdown"&gt;
                      &lt;a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Test Dropdown
        &lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuLink3"&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 1&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 2&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 3&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 4&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 5&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 6&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 7&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 8&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 9&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  
  
  &lt;section class="container"&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;
              &lt;p&gt;Test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;div class="test"&gt;
                  &lt;div class="dropdown"&gt;
                      &lt;a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Test Dropdown
        &lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuLink4"&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 1&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 2&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 3&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 4&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 5&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 6&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 7&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 8&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 9&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  
  
  
  &lt;section class="container"&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;
              &lt;p&gt;Test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;div class="test"&gt;
                  &lt;div class="dropdown"&gt;
                      &lt;a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Test Dropdown
        &lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuLink5"&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 1&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 2&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 3&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 4&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 5&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 6&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 7&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 8&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 9&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  
  
  
  &lt;section class="container"&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;
              &lt;p&gt;Test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;div class="test"&gt;
                  &lt;div class="dropdown"&gt;
                      &lt;a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Test Dropdown
        &lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuLink6"&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 1&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 2&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 3&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 4&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 5&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 6&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 7&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 8&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 9&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section class="container"&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;
              &lt;p&gt;Test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;div class="test"&gt;
                  &lt;div class="dropdown"&gt;
                      &lt;a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Test Dropdown
        &lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuLink7"&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 1&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 2&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 3&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 4&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 5&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 6&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 7&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 8&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 9&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section class="container"&gt;
      &lt;div class="card"&gt;
          &lt;div class="front"&gt;
              &lt;p&gt;Test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;div class="test"&gt;
                  &lt;div class="dropdown"&gt;
                      &lt;a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
        Test Dropdown
        &lt;/a&gt;
                      &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuLink8"&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 1&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 2&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 3&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 4&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 5&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 6&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 7&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 8&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="dropdown-item"&gt;&lt;span&gt;Test Dropdown 9&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>