I know how to make an element scrollable (inner element absolute and parent relative), but what if I want the whole scrollable element to be positioned as absolute? (to move it around a parent div and overlap something underneath). Am i correct to assume it's not possible? Is there a way to do it via javascript? I already tried to wrap the relative parent into an absolutely positioned grandparent but obviously it doesn't work :/

CodePudding user response：

Ok I actually solved it by moving the scrollable element into a component (I'm working in React), importing it into the main component, and then I set the position of the component to absolute. However, I'm still interested in knowing if other people have other solutions

CodePudding user response：

Can you just add an overflow on the absolute positioned item?

Something like this?

https://codepen.io/Daggett/pen/abqZgLa

CSS

section {
  width: 100v;
  height: 100vh;
  background-color: blue;
  postion: relative
}

article {
  width: 20rem;
  height: 20rem;
  padding: 2rem;
  background-color: red;
  overflow: scroll;
  position: absolute;
  top: 2rem;
  left: 2rem;
}

div {
  width: 100%;
  height: 50rem;
  background-color: green
}

HTML

<section>
  <article>
    <div></div>
  </article>
</section>