极客观点
项目管理
HarmonyOS
父元素固定高度并设置overflow:auto;
子元素中有个下拉框，当里面元素足够多（高度超出父元素高度）时，内容被父元素遮挡
原谅我打码。
我也考虑过把overflow:auto移到最外层，但是与需求还是有点区别，所以想问下有没有更好的实现方法
如何让子元素不受父元素 overflow:auto 的影响？
阅读 19.6k
简单粗暴的例子如果是父元素固定高度，overflow:auto，当子元素下拉框超过其父元素时并不会被遮挡。所以查找下你的代码，看哪里是否有设置z-index或者其他之类的。
声明一下，因为题主之前说的是select下拉框加option，所以我上面那个回答是回答他之前那个问题的，现在可以忽略这个回答。
--------------------------------更新分割线----------------------------------
可以设置下拉框样式为position:fixed,然后点击选择时，计算该选择器距离左边和顶部的距离，然后赋值给模拟的下拉框的样式来实现
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
.table{width:500px; height:100px; overflow-y:auto; border:1px solid #000;}
*{padding:0; margin:0;}
ul li{list-style:none;}
.choose-wrap{text-align:center;}
.choose-wrap p{width: 200px; border:1px solid #000; margin:0 auto;}
.choose-list{position:fixed; width:200px; text-align:center; border:1px solid #efefef; display:none; background-color:#fff;}
</style>
<body>
<div class="table">
<div class="choose-wrap">
<p onclick="showChoose();">请选择</p>
<ul class="choose-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<script>
function showChoose(){
$('.choose-list').css({'left':$('.choose-wrap p').offset().left,'display':'block','top':$('.choose-wrap p').offset().top+$('.choose-wrap p').height()})
}
</script>
</body>
</html>
写在父元素外面，通过position: fixed;定位到你点击你那个下面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
}
ul{
overflow-y: auto;
height: 100px;
overflow-x: hidden;
}
ul li{
position: relative;
width: 200px;
}
.a{
position: fixed;
background: red;
z-index: 100;
display: none;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
<div class="a">jjjjjffffffffffjj</div>
<script>
var list = document.querySelectorAll('li');
var a = document.querySelector('.a')
list.forEach(function(el){
el.onclick=function(event){
a.style.display = 'block';
a.style.top =el.offsetTop+'px';
a.style.left =el.offsetLeft+el.offsetWidth/2+'px';
}
})
</script>
</body>
</html>
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？
纯css绘制倒过来的等腰梯形的样式。而且可以把梯形的背景色调整为无色。可以接受复杂代码（比如布局复杂，单个div单个css样式是无法完成，需要多个div搭配多个样式），但是至少满足以下要求（1）可以调整边框的颜色大小粗细等，（2）可以调整边框内外阴影（3）梯形里面还能放文字3 回答5.1k 阅读✓ 已解决
css布局怎么保证右边一直在可视范围内？
如下：灰色和红色的高度都不确定，怎么保证左边高度太高需要滚动时右边一直能在可视范围内？ {代码...}5 回答1.9k 阅读
图片沿着圆环的转动有什么方法吗？
这种怎么让他沿着圆圈转起来呢，有什么css或者什么技术吗？该怎么切图呢，最好有个例子是最好的了，谢谢没有什么思路2 回答1.9k 阅读✓ 已解决
flex相关 flex: 1的子元素如何宽度能100%且不溢出？
{代码...} 正常一般就是在item上加overflow: hidden，但是想不改动item，只改里面的元素，是否不可能实现？1 回答3k 阅读✓ 已解决
CSS如何巧妙实现标题居中、关闭按钮居右效果？
比方说这个，父盒子有左右 padding，中间是标题，右边是关闭按钮。有不通过定位的方式，巧妙实现么？3 回答2.4k 阅读
如何处理 CSS calc() 函数中的单位不一致问题？
当你在 calc() 中混合使用不同单位（如百分比和像素）时，如何确保计算结果符合预期？4 回答2.2k 阅读
js阻止冒泡问题？
尝试过在handler2中阻止了事件冒泡，但是似乎因为handler2触发都没触发，所以e.stopPropagation()也无效，我想得到的结果是，在innerDiv中输入时，只触发handler2,在outDiv中输入时，只触发handler1,应该如何优化？3 回答2.1k 阅读
外层有了overflow,内层无法脱离这个范围，即使绝对定位也不行。
像这个地方，有个思路，因为这里的下拉是div模拟的，可以把模拟的下拉框写在你设置overflow的元素外，然后点击下拉框，把模拟下拉框的东西通过位置计算定位过来。
举栗：
这个下拉就脱离不了外层的overflow。
但是这个日期就可以：
因为这个日期写在这个overflow元素的外面（body最后）,然后当我点击文本框，它计算位置然后把这个日期控件给定位过来显示。