Header Z-Index Tricks

[dmedianik]

I’m creating a hero image header with menu bar below, I’d like the hero image to go above the background of the bar below, but I’d like the image to go below the logo which is also located on that bar.

I tried the following CSS on the logo image and left the bar the logo is located on z-index 9998 but the code didn’t work,

img {
z-index: 9999;
}

Please see attached images;

[rad]

Hi @dmedianik,

Thanks for reaching out.

The z-index only works on sibling elements, it will not work on elements from different parent containers. Have you tried changing the header bar’s z-index as well, that should make it above the other header bar as well.

Thanks!

[dmedianik]

Good day Rad, I’m looking for a way to have the image on bar 1 to be above the background of bar 2 but below the image on bar 2.

Is there css code to change the z-index of the image element separately from the whole bar?

Otherwise how can I accomplish this?

[nabeel]

Hey @dmedianik,

I believe you can achieve this by giving both bars the same z-index and then adjust the z-index of the images separately using Element CSS of the Image element if needed.

Let us know how this goes!

[dmedianik]

That is what I’m asking about, What is the correct css to do this?

I previously tried the code below but it didn’t work.

@dmedianik

img {
z-index: 9999;
}

[friech]

Hi @dmedianik,

You need the banner image on a separate bar, so you can layer it behind another bar (containing the logo). But it seems you already figured that out.

Cheers!

[dmedianik]

I still have not accomplished what I was trying to do, Nabeel mentioned there is a way to do this with z-index css, can someone please share the correct css to target the image?

[friech]

Hi @dmedianik,

Yes with z-index, However, z-index only works on sibling elements, that means if your image and menu/logo are on different bars, that’s not going to work. Would you mind providing us a mock draft of your design so we have a better understanding of what you’re trying to do?

Thanks,

[dmedianik]

What is the correct css to target an images z-index?

[ruenel]

Hello @dmedianik,

You can add an inline element CSS to your image element. You can have this code:

$el.x-image {
  z-index: 99999;
}

This will only work within the bar. The z-index of the bars still matters here. Which bar has the higher z-index will be displayed on top layer.

Hope this makes sense.