Absolute parent overlaps absolute child div with z-index:1000

Question

I have main parent div .objects-wrap which is absolutely positioned and in that I have a table.

Now as the columns increase the horizontal scroll comes in the bottom to parent div .objects-wrap.

Now the issue is in my last td there is bootstrap drop down menu which gets hidden because of the horizontal scroll bar even if there is a z-index:1000 applied to dropdown menu.

The horizontal scroll bar overlaps the dropdown menu What do I do to show the dropdown menu over the scrollbar

Click here to see the JSfiddle for your reference

I hope this explains the scenario and thanks in advance :)

@HTMLcodeHACKER In the fiddle if you look at the last row and in that last td and you click on that, you will see the menu is hidden behind the scrollbar — Ravikiran Bhat, Apr 12 '16 at 13:29
I think this is not possible , with overflow-y:hidden to the parent container you won't be able to see the dropdown becusae it's his child independently of the z-index and absolute. — Spyros Xenikakis, Apr 12 '16 at 13:33
Have a look at this question http://stackoverflow.com/questions/32381746/handle-twitter-bootstrap-dropdown-clipped-issue-having-overflow-auto-on-containe — dnaranjo, Apr 12 '16 at 13:39

Vincent G · Answer 1 · 2016-04-12T13:51:38.473

1

You can remove the overflow-y property here :

.objects-wrap {
  position: absolute;
  overflow: scroll;
  width: 100%;
}

See it here

It will add a vertical scrollbar when you click on the right link, is it ok ?

EDIT

Or you can set a min-height property on it like this

.objects-wrap {
  position: absolute;
  overflow: scroll;
  overflow-y: hidden;
  width: 100%;
  min-height: 300px;
}

EDIT 2

If you wants to not have the vertical scrollbar, you can change the overflow-y property to visible.

However you will have the vertical scrollbar when you click on the right link.

Like this

edited Apr 12 '16 at 13:51

answered Apr 12 '16 at 13:34

Vincent G

8,547
1
18
36

I have had done the same thing earlier,but my requirement is to show it over the scrollbar and not create vertical one.But thanks :) – Ravikiran Bhat Apr 12 '16 at 13:38
You're welcome, i edited my answer with another suggestion. – Vincent G Apr 12 '16 at 13:39
You will be surpised I have even tried the min-height thing.It can work but is there a way to overlap it over the scrollbar. :) – Ravikiran Bhat Apr 12 '16 at 13:42
Oh ok ! Overlap it over the scrollbar, I don't think so. Only `fixed` elements can overlap the scrollbar – Vincent G Apr 12 '16 at 13:52
Yups,got it working.I changed the drop-down menu position to fixed.now have to calculate its positions.Thanks :) – Ravikiran Bhat Apr 12 '16 at 13:57

Absolute parent overlaps absolute child div with z-index:1000

1 Answers1