0

I have two columns, both scrolled in y-axis independently, depending on the content height. Each column contain boxes. So far that is working fine.

Problem comes when I want to add popup boxes when the user clicks on one of the existing boxes. I want to make these boxes:

  1. Remain positioned absolutely to the clicked div position
  2. Be visible on top of the columns (currently they are being covered by adjacent column and horizontal scrollbar appears)

So what I'm trying to achieve is:

required result

And what I currently have is THIS

z-index obviously isn't helping.

Is there a quick simple css-only fix to it, or fairly simple jQuery hack?

ElGavilan
  • 6,610
  • 16
  • 27
  • 36
Pejs
  • 265
  • 5
  • 15
  • 1
    possible duplicate of [Displaying an element outside overflow hidden container](http://stackoverflow.com/questions/24301400/displaying-an-element-outside-overflow-hidden-container) – Mr_Green Nov 14 '14 at 13:37
  • I would put one popup div inside your `main` div instead of your two column divs. – ElGavilan Nov 14 '14 at 13:39
  • But than if you scroll the column down it'll behave as `position:fixed`: [jsFiddle](http://jsfiddle.net/d2nfh5ak/1/) – Pejs Nov 14 '14 at 13:47
  • Mr_Green - thanks for the link, indeed that was similar issue and after mulling it over I managed to get it to work. – Pejs Nov 15 '14 at 01:21

0 Answers0