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 编号上方。