引导按钮下拉菜单出现在其他页面元素后面

Question

我在位于屏幕左侧和右侧的面板上的按钮上有一个下拉菜单。

该下拉菜单显示在面板上其他元素的后面。

我尝试添加相对于父元素的position：relative，并调整z-index。

我试图从寓言的bootstrap-alizarin.css文件中查找并删除overflow：hidden。

仍然无法解决-这是显示该问题的代码的简化版本（单击红色圆圈以查看面板）。

$("#toggle_controls").on('click', function() {
  $(".controls").toggleClass("show");
});

.widget {
  background-color: #ccc;
  z-index: -1
}

.controls {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: -10;
  transform: translateX(-110%);
  transition: transform 0.5s ease-in-out;
  z-index: 300 ! important
}

.show {
  transform: translateX(0%);
  transition: transform 0.3s ease-in-out
}

#toggle_controls {
  z-index: 2000;
  position: absolute;
  left: 5px;
  top: 5px;
  width: 30px;
  height: 30px;
  background-color: #ee2200;
  border-radius: 15px;
  border: #222 1px solid
}

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
	<div class="row">
		<div id="toggle_controls"></div>
	</div>
</div>
<div class="container my-8 controls clearfix" id="controls">
	<div class="row">
		<div class="col-md-8">
			<!--FONT STUFF-->
			<div class="row widget py-4">
				<div class="col-md-6">
					<!--Dropdown primary-->
					<div class="dropdown" id="myDropdown">
						<!--Trigger-->
						<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Font Family</button>
						<!--Menu-->
						<div class="dropdown-menu dropdown-primary scrollable-menu">
							<a class="dropdown-item" style="font-size:16px; font-family:ABeeZee" rel="0" value="ABeeZee">ABeeZee</a>
							<a class="dropdown-item" style="font-size:16px; font-family:Abel" rel="1" value="Abel">Abel</a>
							<a class="dropdown-item" style="font-size:16px; font-family:Abhaya Libre"
							rel="2" value="Abhaya Libre">Abhaya Libre</a>
							<a class="dropdown-item" style="font-size:16px; font-family:Abril Fatface" rel="3" value="Abril Fatface">Abril Fatface</a>
							<a class="dropdown-item" style="font-size:16px; font-family:Aclonica" rel="4" value="Aclonica">Aclonica</a>
							<a class="dropdown-item" style="font-size:16px; font-family:Acme" rel="5" value="Acme">Acme</a>
							<a class="dropdown-item" style="font-size:16px; font-family:Actor" rel="6" value="Actor">Actor</a>
						</div>
						<!--/Dropdown primary-->
					</div>
					<!--CLOSE COL-->
				</div>
			</div>
			<div class="row widget py-4">
				<div class="col-md-1">
					<button type="button" class="btn btn-primary btn-sm set_title">Set</button>
				</div>
				<div class="col-md-3">
					<h2>Title</h2>
				</div>
				<div class="col-md-3">
					<p class="font_family title_font">Family</p>
				</div>
				<div class="col-md-2">
					<p class="font_weight title_font">Weight</p>
				</div>
				<div class="col-md-2">
					<p class="font_style title_font">Style</p>
				</div>
			</div>
			<!--END ROW-->
		</div>
	</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

http://jsfiddle.net/artoo/q1ebs6tk/6/