Position absolute inside an overflow-x scroll

user_4758940 0
Viewed 223

Here's the codepen: https://codepen.io/CEBOK555/pen/NWyzvzx

I have a container who takes 100% of the width screen, with a save button ALWAYS on the top right of the container.

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

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

When there is only one article, the position absolute is working and the display is ok. enter image description here

But when there is multiple articles, I can scroll inside the container, but the button is relative to the screen and not the width of the container. enter image description here I want my button in this case to be at the end of the DIV, next to the last article. So I need to scroll to see it I also tried with a float right, and with a position relative.

How can I have my button on the top right of my scrolled div ?

EDIT: When I have a scrolled Div, I dont want my button to be visible until I scrolled completely to the right.

css-position css html
4 Answers

Wrapping with a scrollable div instead of making the container scrollable will solve your problem. Example with your code :

  <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;
}
user_122847460

You could do something like this:

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

Then make the scroll on the inner container so the button won't scroll with it.

user_158216240

You can try to add another div and put your button outside the container. Try this.

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

You can achieve with help of display:flex; property to add in .container class and need to add some css properties in button like position:sticky; margin-left: auto; align-self: center;
I hope below snippet will help you a lot.

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

user_70529270
Related