부분적으로 덮여있는 div가 고정 된 div 위에 표시되지 않도록하기

Question

페이지 상단에 검색 막대 역할을하는 고정 된 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; 
} 

사업부 회색 막대 및 사업부 입력 상자입니다에서 페이지를 스크롤에서 그들을 유지하기 위해이있다 : 당신은 하나 개의 사업부를 설정하는 Z- 인덱스 속성을 사용할 수 있습니다

position: fixed; 

Answer 1

다른 쪽 위에. 더 높은 z- 색인 번호는 낮은 z- 색인 번호 위에 표시됩니다.