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

Question

我目前有一个固定的div作为页面顶部的搜索栏，然后是容器div中的类似tile的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数字上方。