CODEWITHSUNDEEP
css
user1063287
user1063287

Reputation: 10869

How to make a child div appear above a parent div which has 'overflow' defined?

I've got a modal style div with a 'close button' in the top right hand corner.

enter image description here

The 'close button' div (absolute) appears above its parent div (fixed).

This works fine when the parent div has no overflow property defined.

When overflow is defined in the parent div, however, the close button gets clipped and won't appear above the parent div no matter what absolute / relative / z-index tinkering I do to the parent and child divs.

Is there anyway to get a child div to appear above a parent div which has overflow defined?

Upvotes: 0

Views: 580

Answers (1)

user1063287
user1063287

Reputation: 10869

I ended up doing something like this and got the desired result:

HTML

<div id="parent">
  <div id="child_close"></div>
  <div id="child_scrollable_content">
    <p>Put in your scrollable content here.</p>
  </div>
</div>

CSS

#parent {
  position:fixed;
}

#child_close {
  position:absolute;
  top:-20px;
  right:-15px;
}

#child_scrollable_content {
  overflow: auto;
}

Upvotes: 1

Related Questions