css - 如何让绝对元素出现在具有溢出集的容器之外?
问题描述
我有一个非常小的容器,里面有一个自定义dropdown element
的。
#main {
height: 90px;
width: 400px;
overflow-y: auto;
}
.wrapper-dropdown {
text-transform: uppercase;
letter-spacing: .08em;
font-size: 12px;
position: relative;
width: 200px;
padding: 12px 15px;
background: #fff;
border-radius: 6px;
border: 1px solid #d9e2f6;
cursor: pointer;
outline: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.wrapper-dropdown .dropdown {
position: absolute;
top: 100%;
left: -1px;
right: -1px;
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid #d9e2f6;
border-top: none;
border-bottom: none;
list-style: none;
padding: 0 5px;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
max-height: 0;
overflow: hidden;
margin: 0;
z-index: 5;
}
.wrapper-dropdown .dropdown li {
padding: 0 10px;
width: 100%;
}
.wrapper-dropdown .dropdown li a {
display: block;
text-decoration: none;
color: #6a759e;
padding: 15px 0;
transition: all .3s ease-out;
border-bottom: 1px solid #d9e2f6;
margin-right: 20px;
}
.wrapper-dropdown.active .dropdown {
-webkit-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
-moz-box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
box-shadow: 0 10px 20px 0 rgba(217, 226, 246, .8);
max-height: 400px;
}
<div id="main">
CLICK OPTION 1 TO SHOW LIST
<div class="wrapper-dropdown">
<span class="selectedtext">Option1</span>
<ul class="dropdown">
<li><a href="#" val="Option1">Option1</a></li>
<li><a href="#" val="Option2">Option2</a></li>
<li><a href="#" val="Option3">Option3</a></li>
</ul>
</div>
</div>
我试图让绝对定位的元素(这是选项列表)出现在已overflow-y
设置的主容器的边界之外。
我理解为什么会因为这个答案而发生这种情况。
但我只是询问是否有人对解决此问题的方法有任何见解/提示/建议,或者如果不将下拉项移动到带有溢出集的容器之外,通常是不可能的。
解决方案
推荐阅读
- google-bigquery - 获取 BigQuery 表中的唯一标识符
- php - 从 PHP 脚本连接时,docker mysql 连接被拒绝
- windows - 批处理 - 根据初始用户输入请求用户输入
- google-sheets - 是否可以将条件格式分配给 Google 表格中的命名范围?
- javascript - 子组件vue 2.x内的父组件插槽
- javascript - 如何在 Webpack 中动态要求 JSON 文件?
- batch-file - 检查特定的命名约定
- php - Yii 和 Vue2 CORS 启用。服务器以 404 错误响应预检 OPTIONS 请求
- swift - 如何在 UITableView 中使用多标签?
- node.js - 在 Amazon Cognito 中,每个用户只允许一个活动会话