Search code examples
htmlcssz-index

Bringing a HTML element to front with z-index on overflow in CSS

I am trying to get the blue rectangle container to have a larger z-index than the other boxes when hovering over elements that overflow the container.

Game 3 here has the larger z-index, but I want to access the Loser select in the blue circle below, however I can't, unless I hover back over the blue rectangle to gain focus.

Is there a way around this where it can be handled with just CSS or do I need JQuery?

I created a Fiddle that can replicate this so ignore any JS errors as the actual page requires quite a bit of includes, however the issue is in tact. Hover over the 4th game which has three dropdowns, Source, Pools, Seeds. You can select Seeds just fine. However, hover over another game at the top then come back down to "Seeds", you can't select it unless you hover over "Pools" again. I need "Seeds" to always be selectable regardless of what the overflow is.

https://jsfiddle.net/cblaze22/qp4L15tj/8/

enter image description here

Current Code For Game Hover (Blue Rectangle area)

The .forward puts a large zindex on the blue rectangle area.

$(element).hover(
                function () {
                    if (!$(this).parent().hasClass('editing')) {
                        $(this).addClass('forward');
                    }
                },
                function() {
                    $(this).removeClass('forward');
                }
            );
Solution

  • This was actually a surprisingly easy fix once you understood the structure and the actual problem. Div's covering div's. First you disable all click events on everything within .bracket-part as they aren't needed. Then you add the click events back onto the selects. To make it more generic for easier use again you can simple change select in the CSS selector a class .re-enable-events or something. The JS about z-index's wasnt actually needed.

    #bracket-wrapper .bracket-part select {
  pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
  pointer-events: none;
}

    See: https://jsfiddle.net/uws8pf1y/

    Pointer events has a very good compatibility rate so this solution should be fine across pretty much all devices.