Overlapping Elements -button not accessible behind image slider

Technical
1

Hi funnelish experts,

I need to place a button on top of an image slider by using negative margins. I was able to do that but the buttons end up behind the image slider and I can no longer click on the button to edit it anymore - it is stuck behind:
image
Would appreciate your help on this! Thank you.

Best regards,
Jacob

2

Hi @Jacob ,

To place the button on top of the image slider and make it clickable, you can use CSS to adjust the z-index. Here’s a modified approach that should work:

  1. Set the button’s z-index to a high value so it sits above the slider.
  2. Make sure the button has a position property set to relative or absolute.

Here’s an example:

css

.button-class {
  position: relative; /* Allows for positioning adjustments */
  margin-top: -50px; /* Adjust to move the button where you want */
  z-index: 10; /* Higher value to bring it on top of the slider */
}

If the slider still overlaps the button, try setting a lower z-index on the slider itself, like this:

css

.image-slider-class {
  z-index: 1; /* Lower than the button's z-index */
}

Replace .button-class and .image-slider-class with the actual class names for your button and slider elements.

Let me know if this helps! If you have more questions, feel free to reach out to me at [email protected].

Best regards,
Abdulrehman

3

Hey @Jacob ! You can accomplish this by placing the button BELOW the image element, then click on the button element and apply a negative top margin by pressing the down arrow key on your keyboard as shown below:

2024-11-05 at 11.35

Hope it helps!

1 Like