가능한 불투명도 Z- 색인 버그

Question

웹 페이지에서 불투명도를 설정할 때 정말 문제가 발생했습니다. 불투명도가있는 요소는 페이지의 다른 요소를 가릴 수 있습니다. 이는 Safari, Chrome 및 Firefox에서 발생합니다. 불투명도는 IE7 &에서 무시됩니다. 8. IE9에서 테스트하지 않았습니다.

Fiddle

<style> 
    #content { opacity: .92; background: #dfd; height: 300px;} 
    #sidebar { width: 200px; float: right; background: #fdd; height: 200px; } 
</style> 
<div id="sidebar"></div> 
<div id="content"></div> 

분리 불투명도 예상되는 동작을 복원한다. 또 다른 가능한 해결책은 불투명도 대신 rgba 배경 값을 사용하는 것입니다.

누구에게도이 문제가 발생 했습니까? 그렇다면 어떻게 수정 했습니까?

Answer 1

이 문제는 이미 알려져 있습니다. https://www.google.com/#q=opacity%20change%20z-index

널리 지원되는 속성 인 rgba 배경을 사용해야합니다.

Answer 2

#content에 설정중인 불투명도가 새로운 stacking context을 만들고 스태킹 컨텍스트가 z- 색인에 영향을줍니다. Z- 색인을 수동으로 지정하지 않았으므로 자동으로 할당되며 #content은 #sidebar보다 높은 값을 갖습니다.

단순한 CSS 솔루션 : position: relative; z-index: 2을 #sidebar에 추가하면 (또 다른 스태킹 컨텍스트를 설정하기 위해). 실제 코드에, 당신은 당신이 더 많은 요소가있는 경우 #wrapper에서 너무 #content에 Z- 인덱스를 추가해야 할 수 있습니다 : http://stackoverflow.com/questions/의

#sidebar { position: relative; z-index: 2; /* etc */ } 

http://jsfiddle.net/V4MrH/3/