Let's break down why your z-index values aren't working as expected and fix this step by step:

1. The Core Problem: Z-Index Only Works on Positioned Elements #

Your .home-hero-cta class has a z-index: 2000, but if that element uses the default position: static (which it does, since you haven't set a position value), z-index has no effect. Static-positioned elements ignore z-index entirely.

2. Transform Creates a New Stacking Context #

Your .character-blue-float uses transform: rotate(7deg) — this CSS property automatically creates a new stacking context for the element. This means its z-index is evaluated within its own context, not the global page context. We need to make sure your CTA buttons exist in a stacking context that takes priority.

3. Unnecessary Float Property #

Since .character-blue-float is absolutely positioned, float: right does nothing (absolute positioning removes elements from the normal document flow, so floats don't apply). You can safely remove this line.

Final CSS Fixes #

Update your CSS with these changes:

For the Character Elements:

.character-blue-float {
  position: absolute;
  /* Remove float: right; it's useless here */
  top: 7%;
  left: -20%;
  z-index: 999; /* Lower this to ensure buttons take priority */
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
}

.character-blue-float img {
  width: auto;
  max-width: 800px;
  height: auto;
}

For the CTA Buttons:

.home-hero-cta {
  margin-top: 30px;
  z-index: 2000;
  position: relative; /* This makes z-index work! */
}

.btn-outer-lrg {
  padding: 10px 20px;
  color: #08788c;
  border: 2px solid #08788c;
  border-radius: 5px;
  font-size: 22px;
  background-color: transparent;
  margin-right: 10px;
  font-family: 'Fredoka One', cursive;
  position: relative; /* Optional, but adds extra insurance */
  z-index: 2000; /* Optional, inherits from parent, but explicit is clear */
}

Why This Works: #

• Adding position: relative to .home-hero-cta activates the z-index value, so the buttons now sit in a stacking context with higher priority than the character's z-index.
• Removing the unnecessary float cleans up your code without affecting layout.
• Lowering the character's z-index to 999 ensures it sits below the buttons' 2000 value once the buttons' positioning is fixed.

If you still see issues, check if any parent containers of the buttons or characters have their own z-index or positioning that's creating conflicting stacking contexts — adjust those parent values as needed to maintain the desired hierarchy.

内容的提问来源于stack exchange，提问作者liam geary