css - 防止部分覆盖的 div 出现在固定的 div 上

Question

我目前有一个固定的 div，用作页面顶部的搜索栏，然后在容器 div 中有类似平铺的 div，用于电影海报，当鼠标悬停在上面时会改变不透明度。但是，如果这些电影海报 div 之一被搜索栏 div 部分隐藏，它们将出现在搜索栏 div 的顶部，如下所示:

有没有办法避免这种情况，但保持可见部分的不透明度变化？

.poster
{
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    padding: 2px;
    cursor: pointer;

    opacity: 1;
    transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -webkit-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
}

.poster:hover
{
    opacity: 0.65;
}

灰色条的 div 和输入框所在的 div 有这个来防止它们随页面滚动:

position: fixed;

Answer 1

您可以使用 z-index 属性将一个 div 设置在另一个之上。较高的 z-index 编号将显示在较低的 z-index 编号上方。