Z- 색인 및 자바 스크립트 롤오버

나는 배경 이미지가있는 컨테이너 (div)가 있습니다. 이 div에는 수평 목록 인 메뉴가 있습니다. 내가 필요로하는 것은 onMouseOver 이미지를 삽입하고 절대적으로 위치를 지정하고 텍스트 뒤에 표시하는 것입니다 (물론!) div의 배경 이미지 위에 표시합니다. 또한 jQuery를 사용하지만이 것은 중요하지 않다고 생각합니다. 문제는 온라인으로 볼 수 있습니다. http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex로 이동하고 다음 텍스트 당신이 z-index을 적용하려면 사업부에 position:relative;, absolute 또는 fixed 필요 보인다Z- 색인 및 자바 스크립트 롤오버

 
<html> 
<head> 
    <style type="text/css"> 
    img { 
     top: 0; 
     left: 0; 
     position:absolute; 
     z-index:-1; 
    } 

    #main { 
     color: red; 
     margin: 30px; 
     padding: 20px; 
     width: 700px; 
     min-height: 400px; 
     z-index: -2; 
     background-image: url("http://www.google.com/logos/mother10-hp.gif"); 
     background-repeat: no-repeat; 
    } 
    </style> 
</head> 

<body> 
    <div id="main"> 
    <h1>Z-Index question:</h1> 
    <img src="w3css.gif" width="100" height="140" /> 
    <p>How can we place the green pic between the text and the div#main?</p> 
    <p>I need the green gif to appear</p> 
    <ol> 
     <li>On top of #main's background image</li> 
     <li>Behind the text</li> 
    </ol> 
    </div> 
</body> 

</html>

출처

2010-04-13 Raffaele

를 붙여 넣습니다. the W3C을 인용

출처

2010-04-13 09:58:53

고맙습니다. 그것은 내 문제를 해결했다 – Raffaele

내가 도울 수있어서 기뻐. –

Z- 색인은 위치 요소 (position:absolute, position:relative 또는 position:fixed)에서 작동한다.

출처

2010-04-13 10:00:54

당신 말이 맞아요. 잊었 어!! 감사합니다 – Raffaele

예를 들어이 작업을 만들었습니다. 희망이 도움이됩니다.

<html> 
<head> 
    <style type="text/css"> 
    .img1 { 
     top: 0; 
     left: 0; 
     position:absolute; 
     z-index:2; 
    } 

    #wrapper { 
     background-image: url("http://www.google.com/logos/mother10-hp.gif"); 
     background-repeat: no-repeat; 
z-index:1; 
width:600px; 
height:600px; 

    } 

    #main { 
     color: red; 
     margin: 30px; 
     padding: 20px; 
     width: 700px; 
     min-height: 400px; 
     z-index: 3; 
position:absolute; 
    } 
    </style> 
</head> 

<body> 

<div id="wrapper"> 
    <div class="img1"> 
<img src="w3css.gif" width="100" height="140" /> 
    </div> 
    <div id="main"> 
    <h1>Z-Index question:</h1> 
    <p>How can we place the green pic between the text and the div#main?</p> 
    <p>I need the green gif to appear</p> 
    <ol> 
     <li>On top of #main's background image</li> 
     <li>Behind the text</li> 
    </ol> 
    </div> 
</div> 
</body> 

</html>

에만 위치 요소 Z- 색인을 사용하여, 여기에 래퍼에 배치되지 않으며, 또 그것은 두 div의 사이에 개재된다. 나가 말한대로, 이것은 배치 된보기를 위해 작동하고, 100 % 정확하지 않다, 당신은 당신의 프로젝트에있는 당신의 다른 성분을위한두기를 추가해야 할 것이다. :)

출처

2010-04-13 10:03:02 Kyle

감사합니다, 이건 내 문제를 definetly 해결 – Raffaele

아무 문제도 도와 드리겠습니다. – Kyle

Z- 색인 및 자바 스크립트 롤오버

답변

관련 문제