Z-index和过渡css属性冲突？

Question

在我的页面中，我的投资组合部分下有3个占位符图片。我想要的是让图像在盘旋时变宽和变高。但是，我也有一个固定的标头集，其z-index为1000（显而易见的原因）。问题在于，由于某种原因，即使我已将容器设置为位置：相对于z-index为-1，当我向下滚动时，图像仍会显示在我的标题上。这是我的codepen代码段：

https://codepen.io/PatrickVegas/full/RVapzR/

 * { font-family: 'Raleway', sans-serif; }* HEADER/HOME ---------------------------------*/

我该怎么办？谢谢！

Answer 1

将z-index: 9999;和container-header添加到您的css类.container-header { position: relative; z-index: 9999; ... } 将解决您对这些图片的问题。

<div class="portfolio" id="portfolio">

https://codepen.io/hdl881127/pen/eWzzBp

大多数情况下，当您无法定位某些内容时，请尝试向父母移动并查看其中的内容。在您的情况下<div class="container-header" id="home">与您的导航菜单env.MYVAR = 'HELLO' emailext body: '${ENV,var="MYVAR"}', subject: 'subject', to: 'hello@world.com' 是兄弟姐妹，如果您只为其子元素添加索引，则无法定位它们。

看看这个img，它提供了大量有关位置的信息：

我知道堆栈溢出有很多答案但是当我想到这个时，这个链接帮了我很多。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context