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

它应该有用