gpt4 book ai didi

css - 在相对定位的 div 内固定定位的 div 导致移动 Safari 中出现奇怪的过度滚动行为

转载 作者:行者123 更新时间:2023-12-02 02:40:00 25 4
gpt4 key购买 nike

当我将一个固定的 div 放置在一个相对的 div 中,并将固定的 div 与视口(viewport)的底部对齐,然后尝试在移动版 Safari (iOS 13) 中滚动到底部时,我得到了一个奇怪的效果。看起来好像 div 被白色矩形遮住了。有没有办法在不改变外部或内部 div 的 position 的情况下防止这种行为?

enter image description here

.outer {
position: relative;
z-index: 1;
display: block;
height: 100%;
overflow: auto;
padding: 5px;
}

.inner {
color: white;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background: blue;
}
<html>

<head>
</head>

<body>
<div class="outer">
<div class="inner">
test test test <br/> test test test
</div>
</div>
</body>

</html>

最佳答案

.inner 内容超出了 .outer 包装器的边界。您需要在 .outer 父级上将 overflow 设置为 visible 以使其内容在其相关父级之外可见。

查看结果:https://codepen.io/romainpetit/pen/BaNLaZr

已测试。

.outer {
position: relative;
z-index: 1;
display: block;
height: 100%;
overflow: auto;
padding: 5px;
}

.inner {
color: white;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
width: 100%;
background: blue;
}

关于css - 在相对定位的 div 内固定定位的 div 导致移动 Safari 中出现奇怪的过度滚动行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60215568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com