포지셔닝과z-index에 대한 작은 경험

5229 단어 z-index
오늘 업무 중에 이런 진기한 문제에 부딪혀서 한참을 하고서야 원인을 찾았는데, 마침내 총결하였다.
먼저 DEMO:
<div style="width:800px; height:400px;">
  <div style="width:380px; height:400px; float:left;">
    <div id="a1" style=" position:relative; z-index:1;">
      <div style="position:absolute;">
        <div style="width:400px; height:200px; position:absolute; background:#F00; left:100px; top:50px;"></div>
      </div>
    </div>
  </div>
  <div style="width:380px; height:400px; float:right;">
    <div id="a2" style=" position:relative; z-index:1;">
      <div style="position:absolute;">
        <div style="width:400px; height:200px; position:absolute; background:#0F0; left:-100px; top:100px;"></div>
      </div>
    </div>
  </div>
</div>
<input type="button" value="click" onclick="document.getElementById('a1').style.zIndex=3" /> 

IE7로 이 코드를 실행하면
(IE6에서 이 문제가 발생할지 여부는 아직 확인되지 않았지만, 이 문제가 있을 것으로 추정됩니다. 왜냐하면 이 두 브라우저는 한 쌍의 진기한 꽃이기 때문입니다. )
아무리 버튼을 눌러도 빨간색이 녹색층 위로 기어오르려 하지 않는다는 것을 알게 될 거야..
다른 브라우저에서는 그렇지 않습니다. 유독 IE의 진기한 형제만 이럴 수 있습니다.
그런데...만약 CSS로 z-index:3을 a1에 직접 정의한다면 빨간 테두리가 녹색 테두리를 덮을 수 있습니다...
또한 페이지로 이벤트를 불러옵니다. (예: jquery의 $(document)ready(function(){...})) JS를 터치하고, a1을 수정한 z-index도 빨간 테두리로 녹색 테두리를 덮을 수 있다...
즉, 유독 클릭, 마우스가 이런 시간을 거치면 실행을 촉발하는 JS는 효과가 없다는 것이다.
지금 이 순간...답답하기 짝이 없군..
해결 방법:
a1과 a2의 부모 요소를 상대적 위치로 설정합니다 (position:relative)
그런 다음 Onclick 이벤트가 트리거하는 JS의 기능을 다음과 같이 수정합니다.
a1의 부모 요소의 z-index를 수정하여 a1의 부모 요소의 z-index 값이 a2의 부모 요소의 z-index 값보다 크도록 합니다
이렇게 하면 정상이에요.
 
요약:
IE6과 IE7에서 두 개의 상대적인 포지셔닝 요소는 상급 부모 요소(주의, 가장 가까운 단계)가 같은 요소가 아니라면.
z-index 값은 페이지에서 이벤트 이외의 다른 이벤트를 로드하여 JS를 수정해도 효과가 없습니다.
CSS를 직접 정의하거나 Ready 이벤트를 통해 JS를 수정하면 효과가 있습니다.
임의의 16진수 색상

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage