Question

I currently have a fixed div that acts as a search bar on the top of a page, and then tile-like divs in a container div for movie posters that change opacity when moused over. However, if one of these movie poster divs are partially hidden by the search bar div they appear on top of the search bar div like so:

Is there a way to prevent this but keep the opacity change on the part that is visible?

.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;
}

The div the gray bar and the div the input box are in have this to keep them from scrolling with the page:

position: fixed;

Answer 1

You can use the z-index property to set one div above the other. The higher z-index number will be displayed above the lower z-index number.