Position absolute inside an overflow-x scroll-CodePudding

Here's the codepen:

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

CodePudding user response：

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

  <div >
   <div ></div>
   <div ></div>
   <div ></div>
   <div ></div>
   <div ></div>
  <div/>

CSS:

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

CodePudding user response：

You could do something like this:

<div >
  <div class='inner'>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>

  <button>Save</button>
 </div>

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

CodePudding user response：

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

<div style="position: relative">
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
   </div>
    <button>Save</button>
 </div>

CodePudding user response：

If the element has to scroll with the parent, it should not be absolute. So it can be at the end of the children and along with vertical-align:top, margin-left and margin-top it will work.

.container {
  width: 100vw;
  background-color: red;
  
  /*position: relative;*/
  white-space: nowrap;
}
.wrap {
  overflow-x: auto;
}
.article {
  display:inline-block;
  width: 400px;
  height: 50px;
  background-color: green;
  margin: 10px;
}

button {
  /*position: absolute;*/
  vertical-align:top;
  background-color: blue;
   margin-right: 20px;
  margin-top: 10px;
}

<div >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <button>Save</button>
  </div>
</div>

CodePudding user response：

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 >
    <div ></div>
    <button>Save</button>
</div>

<br>

<div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <button>Save</button>
</div>