在 overflow-x scroll 中绝对定位

Question

这是代码笔：https://codepen.io/CEBOK555/pen/NWyzvzx

我有一个占据 100% 屏幕宽度的容器，并且容器的右上角始终有一个保存按钮。

.container {
  width: 100vw;
  overflow: auto;
  position: relative;
  white-space: nowrap;
}

button {
  position: absolute;
  right: 20px;
  top: 10px;
}

只有一篇文章时，position absolute起作用，显示正常。

但是当有多篇文章时，我可以在容器内滚动，但是按钮是相对于屏幕的，而不是容器的宽度。在这种情况下，我希望我的按钮位于 DIV 的末尾，靠近最后一篇文章。所以我需要滚动才能看到它我也试过右浮动和相对位置。

如何让我的按钮位于滚动 div 的右上角？

编辑：当我滚动 Div 时，我不希望我的按钮可见，直到我完全滚动到右侧。

Answer 1

用可滚动的 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;
}

Answer 2

你可以这样做：

<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>

然后在内部容器上滚动，这样按钮就不会随之滚动。

Answer 3

您可以尝试添加另一个 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>

Answer 4

你可以借助display:flex; 属性来添加 .container class 并且需要添加一些 css 属性 在 button 喜欢 position:sticky; margin-left: auto; align-self: center;
我希望下面的代码片段能对您有所帮助。

.container {
    display: flex;
    width: 100vw;
    background-color: red;
    overflow: auto;
    position: relative;
    white-space: nowrap;
}
.article {
    display: inline-block;
    width: 400px;
    min-width: 400px;
    height: 50px;
    background-color: green;
    margin: 10px;
}
button {
    display: inline-block;
    position: sticky;
    background-color: blue;
    right: 20px;
    margin-left: auto;
    align-self: center;
    cursor: pointer;
    z-index: 2;
}

<div class="container">
    <div class="article"></div>
    <button>Save</button>
</div>

<br>

<div class="container">
    <div class="article"></div>
    <div class="article"></div>
    <div class="article"></div>
    <div class="article"></div>
    <div class="article"></div>
    <div class="article"></div>
    <div class="article"></div>
    <button>Save</button>
</div>

在 overflow-x scroll 中绝对定位

Position absolute inside an overflow-x scroll

html

css

css-position