我有一个很小的容器,里面有一个自定义dropdown element
。
HTML
<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>
CSS
#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;
}
我正在尝试使绝对定位的元素(这是选项列表)显示在设置了overflow-y
的主容器的边界之外。
我了解为什么由于此答案而发生这种情况;
Make relatively positioned element not affect layout/height
,但只是询问是否有人对解决此问题有任何见解/建议/建议,或者如果没有将下拉项移到设置了溢出的容器之外,通常是否不可能做到?