在溢出-x滚动中的绝对位置
在溢出-x滚动中的绝对位置
提问于 2022-06-03 08:11:33
这是代码库：https://codepen.io/CEBOK555/pen/NWyzvzx
我有一个容器，它占了屏幕宽度的100%，容器的右上角总是有一个保存按钮。
.container {
width: 100vw;
overflow: auto;
position: relative;
white-space: nowrap;
}
button {
position: absolute;
right: 20px;
top: 10px;
}当只有一篇文章时，位置绝对是工作的，显示是可以的。
但是当有多篇文章时，我可以在容器内滚动，但是按钮相对于屏幕而不是容器的宽度。
在本例中，我希望我的按钮位于DIV的末尾，靠近最后一篇文章。因此，我需要滚动看它，我也尝试了一个浮动的权利，和一个位置的相对。
我怎么能把我的按钮在我的滚动div的右上角？
编辑:当我有一个滚动的Div，我不希望我的按钮是可见的，直到我完全向右滚动。
回答 4
Stack Overflow用户
回答已采纳
发布于 2022-06-03 08:24:01
使用可滚动div进行包装，而不是使容器可滚动，将解决您的问题。使用代码的示例：
<div class="wrap">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div/>CSS：
.container {
width: 100vw;
background-color: red;
position: relative;
white-space: nowrap;
}
.wrap {
overflow: auto;
}Stack Overflow用户
发布于 2022-06-03 08:25:23
你可以这样做：
<div class="container">
<div class='inner'>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
<button>Save</button>
</div>然后在内部容器上滚动，这样按钮就不会滚动了。
Stack Overflow用户
发布于 2022-06-03 08:25:48
您可以尝试添加另一个div并将按钮放在容器外。尝尝这个。
<div style="position: relative">
<div class="container">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
<button>Save</button>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72486592
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号