절대 위치 지정이있는 크롬에서 z- 색인이 올바르게 표시되지 않습니다.

Question

아래에 js 피들 링크를 붙여 넣었습니다.이 문제는 #abicmetogg div가 #pic div 뒤에 나타나고 #line div가 #pic에 앞에 표시됩니다. #aboutmetoggle 뒤에 표시하려면 #pic 및 #line이 필요합니다.

IE의 파이어 폭스와 사파리가 잘 보이지만 크롬에서는 보이지 않습니다. 추가 태그 또는 열린 태그를 확인했는데 아무 것도 볼 수 없으며 div가 절대적으로 배치되어 올바른 순서로 나타납니다. 이것은 나에게 난처한 상황에 빠진 조금 떠나는 때 사람이 JS에

jsFiddle example

는 # 라인의 DIV 너무 멀리 완전히 이상 나타나고있다 바이올린 ..... 도움이 될 수 있습니다. 분명히이 코드는이 사이트는 그래서 아래의 질문에서 코드를 삽입하라고 요구하고있다

:-(... 엉망이 페이지의 HTML이지만, 그 :-) 어쨌든 바이올린의

<div id="container"><div id="banner"><h1><img src="images/banner.png" width="432" height="64" alt="front end web designer" /></h1> 
</div> 

당신이 #aboutmetoggle에 position:absolute이 그가 배치 선언이 아닌 절대 위치와 자신의 가장 가까운 부모를 찾고 있기 때문에

<div id="pic"><img src="images/me.jpg" width="100%" height="100%" alt="me" /></div>** 


<a href="#" name="hiremetoggle" title="Hire me" id="hiremetoggle"> 
    <img src="images/hire.png" alt="Hire me " border="0"/></a></div> 

    <a href="#" name="prevtoggle" title="Previous work" id="prevtoggle"><img src="images/work.png" alt="Previous work" border="0"/> 
    </a></div> 


<div id="line"></div> 




<div id="prevcontent"> 

<div class="img-wrap"><img src="images/example2.png" alt="Dr Martens fan site" /> <div class="img-info"><a href="http://www.webdesignerlhm.co.uk/drmartensfansite" target="_blank"><h2><br />Dr Martens Fansite</h2> </a></div></div> 
<div id="block"> </div> 

<div class="img-wrap2"><img src="images/example1.png" width="165" height="165" alt="Rainbow Feet holistic therapy college project e-commerce site" /> 
    <div class="img-info"><a href="http://www.webdesignerlhm.co.uk/rainbowfeet/holistic.html" target="_blank"><h2><br />Rainbow Feet</h2> a college project website</h2> </a></div></div> 





<div id="blockrow"></div> 



<div class="img-wrap4"><img src="images/example3.png" width="230" height="165 
" alt="Band style website" border="0"/><div class="img-info4"><a href="http://www.webdesignerlhm.co.uk/bandsite/" target="_blank"><h2><br />Band template website</h2></a></div></div> 
<div class="img-wrap3"><img src="images/Misfestwebsite.jpg" width="258" height="165" /><div class="img-info3"><a href="http://www.misfest.co.uk" target="_blank"><h2><br/><br/>Misfest festival website</h2></a></div></div> 
<div id="rowblock" ></div><div id="rowblock"></div><div id="rowblock"></div> 
</div> 

Answer 1

문제 입니다. 이 부모는 #container이고 position:fixed을 가지고 있으며 divs 아래에 있기 때문에 그림이 #aboutmetoggle입니다.

세 가지 가능한 해결 방법 :

1. 컨테이너에서 the position:fixed를 제거합니다.

2. 용기에 대해 2보다 큰 z-index을 지정하십시오.

3. 을 자신의 부모가 될 수있는 HTML 구조의 다른 사이트에 배치하십시오.

모두 피들링이 도움이되지 않아 수행 할 수있는 작업과 수행하려는 작업에 따라 다릅니다.