html - Z-Index 在绝对对象上无法正常工作

Question

我在网站上遇到一些关于绝对对象的问题。 Z-index 基本上无法正常工作。我可能有点笨？

这是网站:http://www.mascots.ds-demo.co.uk/

蓝色和黄色字符需要位于英雄 cta 按钮“了解更多”和“获取报价”的后面，但我无法让它们与 z-index 一起使用。

字符的 CSS:

.character-blue-float {
position: absolute;
float: right;
top: 7%;
left: -20%;
z-index: 1000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
}

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

按钮上的 CSS:

.home-hero-cta {
margin-top: 30px;
z-index: 2000;
}

.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;
}

Answer 1

将下面的 css 应用到 hero-home 并检查

.hero-home {
  z-index: 1001;
  position: relative;
}

它应该工作