setting css variable value in popup

Hello everyone, I have this CSS issue, I have a button option, and I would like it to be behind my popup. I have multiple popups 

within the form. How can I change the following variable?

Thank you.

Hello Christian,

Thank you for your well explained question.

To override the --osui-popup-layer variable,

  1. Open your own theme
  2. Select Edit Style Sheet
  3. At the top put the following

:root {

--osui-popup-layer: 250;


Or instead of 250 whatever you want to set the z-index to. I should mention, this could have unintended consequences, so instead you may want to adjust the z-index of the BEH class.

Now this may not resolve your issue due to opacity. The setting of opacity has an impact on z-index:

A neat hack may be to set a slight opacity on the buttons when they are in this scenario. eg

.the-button-class.with-popup {

opacity: 0.95;


You probably don't need this, but for anyone else reading, here is a link to z-index documentation.

I hope this helps!

Kind regards,


Hello Cristian,

Did you tried like this:

Create the class .MyClass on your theme like this:

.MyClass.popupbackdrop {

z-index: 300;

Just apply the same to your div/widget.

Best Regards

Hi Cristian Angel Puma Villalva,

The z-index property specifies the stack order of an element. 

Popup-backdrop {



give the z-index value wherever you have created you this class. very first change the z-index value from developer too only the change the value in you existing class.

hope this can work if not plz share the OML

Kind regards

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.