We have two web parts which are supposed to be used together. One can be placed above the other. The upper web part allows a drop down to be opened.

The problem: this drop down opens under the lower webpart. The user cannot interact with it:

hidden drop down

Two possible solutions are:

  • somehow manipulate the z-index of the upper web part to be "higher" than the web part below it
  • expand the height of the upper web part when the dropdown opens (looks weird though)

How is this supposed to be handled in the SharePoint Framework? Can I specify the base z-index of a web part? Something else?

1 Answer 1


Ideally, you would manipulate the z-index of the drop-down list. This isn't a SharePoint framwork specific problem, and there isn't a SharePoint framework specific solution.

  • I agree insofar that ideally we would set the z-index of the drop down. But unfortunately manipulating the z-index of the drop down list doesn't work. Apparently modifying the z-index of one of the web part containers (which are outside of the control of the web part) works. But I would classify this as not supported. Mar 25, 2019 at 14:38
  • How is the drop-down list positioned? z-index will only work on positioned elements (i.e. position:relative; or position:absolute).
    – Joe McShea
    Mar 25, 2019 at 18:55
  • 1
    I need to check this. It's a react control that is dynamically creating the popup. Mar 25, 2019 at 20:25
  • The dropdown uses position:absolute. I modified it's z-index to high values - to no avail. It still disappears. Mar 25, 2019 at 20:38
  • 1
    Not sure what else to try, but while I agree that changing the z-index of DOM elements inserted by SharePoint isn't technically supported, just doing that through CSS seems safe enough to me.
    – Joe McShea
    Mar 27, 2019 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.