我正在尝试使用绝对位置显示下拉菜单，但 div 变得不可点击。
我尝试过使用 overflow auto、white-space: nowrap、z-index: 999、pointer-events 这些都不起作用
我希望此下拉菜单作为普通注销菜单出现在所有列和文本上。 current state of my dropdown menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>pagedemo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<style>
.dropdown{
border-radius: 4px;
background-color: white;
width: 8.25rem;
left: 3rem;
min-height: 4rem;
color: gray;
bottom: 0rem;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.11);
overflow-x: scroll;
background-color: yellowgreen;
padding:10px;
margin-top: 10rem;
}
.dropdownOption{
width: 8.25rem;
}
.dropdownOption:hover{
cursor: pointer;
background-color: honeydew;
}
.leftNav{
background-color: white;
height: 100vh;
}
</style>
<body style="background-color: bisque;">
<div class="container">
<div class="row">
<div class="col-1, leftNav" >
<div class="dropdown">
<div class="dropdownOption">
logout
</div>
<div class="dropdownOption">
account settings
</div>
</div>
</div>
<div class="col-10" style="background-color: tomato;">
data
</div>
</div>
</div>
</body>
</html>
最佳答案
您应该在您的 .leftNav 组件上添加一个 z-index 以确保它位于您的主列之前。
fiddle :https://jsfiddle.net/azkq2480/
关于css - 允许一个列溢出到另一个列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58689330/