如何解决这个 CSS 高级定位问题？答案

【问题标题】：How to fix this CSS advanced positioning issue?如何解决这个 CSS 高级定位问题？
【发布时间】：2023-04-06 21:30:01
【问题描述】：

我正在创建一个网站，并且正在为 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" 出现在inner_container div 内的<img/> 标记之上。

不幸的是，块元素 "blur" 被放置在图像标签的顶部，使用：

"position : relative / position : absolute"

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

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

"position : relative / position : absolute"

这样我仍然可以在outer_container div 中对齐inner_container div。

实际页面代码可见here

【问题讨论】：

【解决方案1】：

给每个元素一个 z-index 值：z-index 较高的元素出现在 z-index 较低的元素的“前面”。

所以：

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

不确定，但如果你想要 outer-container 'behind' 给它 -2 的 z-index。

【讨论】：

这只有在你也使用position:relative;（或absolute，或fixed等）时才有效，但是，这应该没问题，因为如果你不设置@ 987654325@ 或 co（和其他人都暗示你已经知道你在用它做什么）。