webkit-overflow-scrolling 隐藏绝对定位的 div

Posted 2023-03-05

【中文标题】webkit-overflow-scrolling 隐藏绝对定位的 div

【英文标题】：webkit-overflow-scrolling is hiding absolute positioned div

【发布时间】：2015-12-31 20:13:52

【问题描述】：

我先给出例子和截图：

html：

<div class="add-link-box">
<div class="add-link-box-close-button" id="add-link-box-close-button">X</div>
<form name="add-link" id="add-link-form" method="post" action="" enctype="multipart/form-data">
<div style="width: 90%;" class="alink-field">Add A Link</div>
<div class="mobile-form-frame" id="mobile-form-frame">
<div class="alink-field mobile-alink"><label for="link-url">Link Address:</label></div>
<div class="alink-field"><input type="text" name="linkurl" id="link-url" class="add-link-form" 
placeholder="www.awebsite.com"></div>
<div class="alink-field mobile-alink"><label for="link-description">Link Description:</label></div>
<div class="alink-field"><input type="text" name="linkdescription" id="link-description" class="add-link-form" placeholder="my
website"></div>
<div class="alink-field mobile-alink"><label for="link-image">Link Image:</label></div>
<div class="alink-field"><input type="file" name="linkimage" id="link-image" class="add-link-form"></div>
<div class="alink-field"><input type="button" name="submit" value="Submit Link" class="add-link-form" id="add-link-submit"></div>
<div class="alink-field"><input type="reset" name="reset" value="Clear" class="add-link-form" id="reset"></div>
</div>
</form>
</div>

CSS：

.add-link-boxborder: 2px #006BB5 solid; color: #006BB5; font-family: bonvenocf; text-align: center; font-size: 16pt; margin: 10px; height: 90%; margin-top: 30px; overflow: auto; -webkit-overflow-scrolling: touch;

.mobile-form-frameoverflow: auto; height: 90%;

.add-link-box-close-buttonposition: absolute; display: block; right: 5px; top: 5px; width: 20px; height: 20px; padding: 2px; line-height: 18px; font-size: 18pt; text-align: center; cursor: pointer; font-weight: bold; color: #FF0000;

.add-link-box-close-button:hovercolor: #FF0000;

.alink-fieldwidth: 90%; margin: 0px; display: block; padding: 10px; margin-left: auto; margin-right: auto; text-align: center;

.mobile-alinktext-align: left;

问题来了：

在mobile-form-frame类中添加-webkit-overflow-scrolling: touch;时（为了在ios设备上实现原生滚动），关闭这个div的“X”是隐藏的。如果我们删除-webkit-overflow-scrolling: touch;，它不会。我已经进行了一些搜索，但找不到其他遇到过同样问题的人。我不明白为什么这会导致绝对定位的 div add-link-box-close-button 被遮挡。谁能帮我解决这个问题？这实际上是 iOS 上 Safari 中的一个错误吗？

我已经包含了屏幕截图来展示我正在体验的结果。

编辑：上面的 html 用 position: fixed; 包裹在容器 div 中

【问题讨论】：

游戏已经很晚了，但你见过这个解决方案吗：***.com/questions/9801687/…

您找到解决方案了吗？我看到了同样的问题，这真的让我很烦恼。基本上，任何打开了触摸滚动的容器似乎都被不可分割地对待：它里面的定位元素不能显示在它外面，而它外面的定位元素不能显示在里面的任何元素后面，不管 z 索引如何被指定。这真的搞砸了我的设计师指定的 UI，它需要有选择地使滚动列表中的元素变暗......

【参考方案1】：

使用这个 CSS

.add-link-box 
    position: relative;

【参考方案2】：

不是专家只是一个想法，如果您移动“X”z-index 会怎样？你试过吗？

也许 X 已显示但不在前景中。只是一个想法