Question

我正在创建一个网站，正在为CSS制作悬停动画。

<html> 
...
<body>
<div id ="outer_container">
    <div id="inner_container">
        <img id="imageOne"/>
    </div>
</div>
...

</body>
<html>

outer_container占用页面宽度

inner_container是outer_container的孩子，并在其中心垂直对齐。

CSS动画显示一个名为'blur'的隐藏元素，它基本上是一个占据图像宽度和高度的背景颜色块。悬停 "blur"会显示在<img/> div内的inner_container标记的顶部。

不幸的是，块元素"blur"使用以下方式放置在图像标记的顶部：

"position : relative / position : absolute"

导致它干扰用于将display : inline-block div与inner_container div对齐的outer_container。

我正在寻找一种解决方案，允许隐藏元素显示在<img/> div的inner_container标记之上，而不使用

"position : relative / position : absolute"

这样我仍然可以将inner_container div内的outer_container div对齐。

可以找到实际的网页代码here

Answer 1

为每个元素赋予 z-index 值：具有更高z-index的元素出现在＆＃39;前面。具有较低z-index的元素。

所以：

blur{
  z-index:0;
}
img,inner-container{
  z-index:2;
}

不确定，但如果您想要外部容器＆＃39;落后＆＃39;给它一个-2的z指数。