CODEWITHSUNDEEP
htmlcss
AHmedRef
AHmedRef

Reputation: 2611

Make absolute child div overflow out of its scrollable relative root parent in CSS

I need to let child div (with green color) out of its root parent (with red color), it's work when I remove overflow-y:scroll attribute from the root parent div, but I need the parent root to be scrollable.

CSS Code : 

    .root-parent{
      font-size:20px;
      overflow-y:scroll;
      background-color:red;
      height:100px;
      width:100%;
    }
    .parent{
      width:50%;
      background-color:blue;
      height:50px;
      position:relative;
    }
    .child{
      width:50%;
      height:200px;
      background-color:green;
      position:absolute;
    }
<div class="root-parent">
      <div>1</div>
      <div class="parent">
         <div class="child">
           <div>2</div>
           <div>2</div> 
        </div>
      </div>
    </div>

this is the link to see how it looks like ^^

Upvotes: 0

Views: 895

Answers (1)

Itay Gal
Itay Gal

Reputation: 10834

Add top rule to the child class and remove the position: relative from the blue div, then it will be position above the red div.

position absolute refers to the first ancestor with position relative.

UPDATE

If you want to make the red div scrollable and also overflow the green div it cannot be done with CSS alone. You can do it with JS. Calculate the top location of your blue element and set it as top rule to the green element

Here's an example

Upvotes: 1

Related Questions