Skip to main content

Search and Top Navigation

#14930 closed bug (notabug)

Opened March 04, 2016 10:23AM UTC

Closed March 08, 2016 12:22AM UTC

zIndex not returning highest zIndex

Reported by: asc99c Owned by:
Priority: minor Milestone: none
Component: ui.core Version: 1.11.3
Keywords: Cc:
Blocked by: Blocking:


I've noticed a problem with zIndex when using an autocomplete widget. I've got a 'popup' dialog which greys out the page background, which leads to some (potentially unusual) z-Index usage to make everything work nicely.

The grey overlay is at zIndex 4, while the element with the autocomplete added has a zIndex of 2 (there was a reason for this that someone explained to me!), but it's a child of an element with zIndex 5, so it appears on top of the overlay.

However the auto-complete widget uses zIndex() + 1 of it's direct target, which returns 3, and then displays under the grey overlay.

I've got a workaround by using the open() event to fix the zIndex, but I'm wondering is this something that the core zIndex function should do? (Or is my zIndex usage too weird to contemplate!)

My zIndex fix is just taking the maximum of the parent tree and leaves the autocomplete widget displayed with zIndex 6:

  fixAutoSuggestZIndex: function(event, ui) {
    var target = $(;
    var widget = target.autocomplete("widget");
    var maxz = target.zIndex();

    while( target.length && target[0] !== document )
      var z = target.zIndex();
      if( z > maxz )
        maxz = z;

      target = target.parent();
    widget.zIndex(maxz + 1);
Attachments (0)
Change History (1)

Changed March 08, 2016 12:22AM UTC by scottgonzalez comment:1

resolution: → notabug
status: newclosed

It doesn't sound like there's actually a bug here. Also, .zIndex() was deprecated in 1.11.0 and will be removed in 1.12.0 (this has already happened in master and release in 1.12.0-beta.1).