Css 允许一个列溢出到另一个列中
我试图使用position absolute(绝对位置)显示下拉菜单,但div变为不可单击 我尝试过使用溢出自动、空格:Css 允许一个列溢出到另一个列中,css,Css,我试图使用position absolute(绝对位置)显示下拉菜单,但div变为不可单击 我尝试过使用溢出自动、空格:nowrap、z-index:999、指针事件,但这些都不起作用 我想这个下拉菜单来作为一个正常的注销菜单重叠的所有列和文本 页面演示 .下拉列表{ 边界半径:4px; 背景色:白色; 宽度:8.25雷姆; 左:3rem; 最小高度:4rem; 颜色:灰色; 底部:0rem; 盒影:0 2px16px 0 rgba(0,0,0,0.11); 溢出-x:滚动; 背景颜色:黄绿色
nowrap
、z-index:999、指针事件,但这些都不起作用
我想这个下拉菜单来作为一个正常的注销菜单重叠的所有列和文本
页面演示
.下拉列表{
边界半径:4px;
背景色:白色;
宽度:8.25雷姆;
左:3rem;
最小高度:4rem;
颜色:灰色;
底部:0rem;
盒影:0 2px16px 0 rgba(0,0,0,0.11);
溢出-x:滚动;
背景颜色:黄绿色;
填充:10px;
保证金上限:10雷姆;
}
.下拉选项{
宽度:8.25雷姆;
}
.dropdown选项:悬停{
光标:指针;
背景色:蜜露;
}
.左导航{
背景色:白色;
高度:100vh;
}
注销
帐户设置
数据
您应该在.leftNav
组件上添加一个z-index
,以确保它位于主列前面
Fiddle:添加指针事件:无;设置为绝对的div通过clickable.Hi来实现。如果您需要帮助,我们需要一点您的代码:)添加到选择
位置:相对;z指数:9999代码>z索引和位置:相对;什么都不做。我现在已经提供了我的代码
<!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>