NO BUG: Negative z-index for section

If you set a negative one (-1) for z-index on a section, the buttons and slider indicator inside the section becomes unclickable in the front end.

In the bricks builder interface, all the elements in the section with negative one z-index becomes unclickable as well (the effect is not immediate, only when you reopen the builder will you experience this).

Work around: minimum z-index is zero.

Not sure if this is intentional, but allowing a negative z-index would speed up arranging things since the default for all elements is presumed to be zero.

Hi @jayguntor,

This behavior aligns with standard CSS functionality. A negative z-index positions elements behind their container, making them unclickable. This is not specific to Bricks but how CSS operates in general.

The unclickable elements are still visible. I did not say they are behind the container. I do this quite often if I want border shadows to display correctly between sections.

Can you maybe share a URL or screenshots of the bug? I’m not sure I understand what’s the problem :eyes:

Steps to recreate the bug:

  1. on a new page, create a section
  2. inside the container add a button and set the link to “#”
  3. set the z-index of the section to negative one (-1)
  4. save and see the button in the front end, it is unclickable.
  5. delete z-index of the section, then the button becomes clickable.

But that’s just how CSS works. I don’t understand how this is a bug?

Hi jayguntor

@charaf is absolutely right.

This is standard CSS and certainly not a bug:

The z-index sets the stack order of the element and negative numbers are allowed.

It is your responsibility to set the z-index in the way that you want your elements to appear.

Cheers

Patric

Sorry for the confusion. I never thought the -1 z-index was inherited in all elements under the section. I presumed the button remained at default 0; hence, me thinking something is wrong.

2 Likes