CODEWITHSUNDEEP
htmlcsscss-position
CE_
CE_

Reputation: 1118

Position absolute inside an overflow-x scroll

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.

Upvotes: 3

Views: 2029

Answers (4)

Raeesh Alam
Raeesh Alam

Reputation: 3480

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>

Upvotes: 1

raielly
raielly

Reputation: 188

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>

Upvotes: 0

Pepijn
Pepijn

Reputation: 86

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.

Upvotes: 0

Zeyar Paing
Zeyar Paing

Reputation: 433

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

Upvotes: 2

Related Questions