Document that COOKiES UI block should be placed in Content Below region when using Olivero theme

@JFeltkamp: Could you please have a look? Where does this have to be fixed? I'm unsure, as I think .cookies-fallback in css/cookies.lib.css wouldn't be the right place?

Does it have to be fixed in the cookiesjsr lib?

I just run into this when I was upgrading my site to D10, using the default Olivero theme.

What I understand from the proposed resolutions by @tobiasb, the first one is not going to work on any currently available Firefox or IE version.

I'm not a frontend dude at all, so bare with me please. The second proposal is written in conditional "when banner is visible / open", in other words it sounds like it needs some additional logic than just a CSS rule. Or do I interpret this incorrectly?

Cheers,
Markus

p.s. I agree the current triaging that this is Major since this rendering issue occurs on D10 default theme...

I was trying to investigate this after a while but setting the z-index to 3 like suggested in the issue description does not seem to work for me. When debugging with Firefox web developer tools, I get a message "z-index has no effect on this element since it's not a positioned element. Try setting its position property to something other than static." Screenshot of this message is attached.

As I mentioned in my previous post, I'm on really thin ice with CSS and other frontend stuff, so please bare with me... :)

Cheers,
Markus

Okay, I managed to figure out the reason for this behavior, please have a look at the attached screenshot.

The z-index of the CSS class .cookiesjsr-layer is very high, 314160. This is not the problem.

The issue is that .site-footer is a parent of .cookiesjsr-layer and the z-index of .site-footer is 1. This is defined in layout-footer.css:31 (on Drupal 10.0.9).

However, .layout-main-wrapper, which is a sibling of .site-footer, has a higher z-index 2, which is defined in layout.css:50. This means that the .site-footer is always under .layout-main-wrapper.

Looking at the inline comments of the Olivero layout.css, this seems to be intentional:

.layout-main-wrapper {
  position: relative;
  z-index: 2; /* Ensure dropdown is not cut off by footer. */
}

I don't think there is much that the Cookies module can do about this. I'll open a new issue to Olivero issue queue and refer to this issue.

Cheers,
Markus

I created an issue to Core issue queue: 🐛 z-index of .layout-main-wrapper causes problems with Cookies modal dialog placed inside .site-footer Closed: works as designed

Postponed on 🐛 z-index of .layout-main-wrapper causes problems with Cookies modal dialog placed inside .site-footer Closed: works as designed

We just received guidance from @lauriii in the Drupal core issue 🐛 z-index of .layout-main-wrapper causes problems with Cookies modal dialog placed inside .site-footer Closed: works as designed for this. This issue will not occur if the COOKiES UI block is placed for example in the Content Below region.

I changed this issue from Bug to a documentation Task and updated the issue summary with a proposed documentation resolution.

Cheers,
Markus