OverlayPanel: z-index issue

The contents of an opened <p:overlayPanel> should be at the top (speaking in z-dimension) and cover other contents. However, if the <p:overlayPanel> is used inside a <p:tabView>, this is not the case for `<p:commandButton> components. They cover the overlayPanel!

A picture is worth a thouthands words:

To me this seems like a CSS bug, but I couldn’t find out, what the actual problem is. It seems, opacity, position and transform are related, but I couldn’t say definitely.

Reproducer Run this simple XHTML and click the “click me” text to reproduce:

    <h:form id="myForm">
      <p:tabView id="tabView" >
        <p:tab title="Test">
          <h:outputText id="trigger" value="click me" />         
            <p:overlayPanel for="trigger" style="background-color: #4c4c4c;">
              <h1 style="padding:1em">Some big Tooltip</h1>
            </p:overlayPanel>
        </p:tab>
      </p:tabView>

      <div><p:commandButton value="p:commandButton" /></div>
      <div><h:commandButton value="h:commandButton"/></div>
      <div><p:panel>p:panel - hello</p:panel></div>

    </h:form>

Environment:

• PF Version: 8.0
• JSF + version: _e.g. Mojarra 2.3.9 (probably irrelevant)
• Affected browsers: tested with FireFox 87, Chromium 89 and Opera 76

Expected behavior

The contents of the overlayPanel should not be covered by any other component like the <p:commandButton>. The button should be “under” the overlayPanel.

[matinh]

It’s definitely not a (simple) z-index thing. Changing z-index has no effect unless I set the z-index of the problematic button to -1!

It seems the problem is triggered by a combination of various style-attributes. I could work around the problem when I defined the following CSS rules:

    .ui-button {
        position:initial !important;
        -moz-transform:none !important;
        -o-transform:none !important;
        -webkit-transform:none !important;
        transform:none !important;
    }

Note, that this might have unwanted side-effects. I didn’t test this extensively.

Unfortunately this change was not enough, when the button was disabled. In this case I had to additionally deactivate the opacity:

    .ui-state-disabled {
        opacity: 1 !important;
    }

That’s not what I want, but that was the only way I found to bring the button below the tooltip 😦

To me this really looks like a bug in the HTML rendering engine. But then, it probably wouldn’t be in all/most browsers. Anyway. I think I’ll stop here for now. If somebody has any useful input, you’re more than welcome!

[melloware]

Thanks @matinh . At least we know its fixed in 10.0 😄