css3 Z- 색인 문제가 작동하지 않습니까?

임 유니 프로젝트에서 일하고 있고 몇 페이지의 배경을 만들기 위해 내 자신의 이미지가 필요합니다. 키 로고, 다음 및 뒤로 버튼, 그리고 이미지가 있습니다. 나는이 모든 요소 뒤에 이미지가 있기를 바란다. 각 요소에 상대/절대 위치 및 Z- 색인의 위치를 지정했습니다. 그러나 이미지는 여전히 다른 요소 아래에 푸시되고 있습니다. 어떤 충고? 나는 상대적인 CSS/HTML을 찾아 그것을 아래에 놓을 것이다.css3 Z- 색인 문제가 작동하지 않습니까?

HTML :

<body> 
<div id="logo"> 
<img src="images/key.jpg" width="3%" height="3%"/> 
</div> 

<div class="next"> 
<a href="scene2.html"> Next</a> 
</div> 

<div class="back"> 
<a href="abduction.html"> Back</a> 
</div> 

<div class="backing"> 
<img src="images/scene1.jpg" width="800" height="800"/> 
</div> 

</body> 
</html>

와 CSS :

#logo { 
    position:relative; 
    z-index:200; 
} 

.backing { 
    position:absolute; 
    z-index:0; 
    float:left; 
} 

.next .back { 
    position:relative; 
    z-index:180; 
}

출처

2012-01-07 Matt Murphy

귀하의지지 요소는 그것이 그 아래 있다고 그냥, 다른 요소 뒤에 사실이다. HTML 문서에 backing 요소를 먼저 넣으면 나머지 페이지 아래에 배치됩니다.

enter image description here

하나의 대안은 대신 모든 요소에 대한 Z - 인덱스를 설정하는 body 태그의 배경 이미지 속성을 설정하는 것입니다.

아직하지 않는 이유가 있습니까?

<body style="background-image: url('background1.png')">

(서로 다른 배경을 가진 많은 페이지가있는 경우 것이 좋습니다) 당신이 다음

를 사용하여 배경 이미지를 설정할 수 AJAX를 사용하여 페이지를 변경하는 경우

는 HTML의 body 태그의 배경을 설정하려면 내가 body 태그의 배경 이미지를 변경한다면 내가 CSS에서 생각했기 때문에 내가 이미를 havent 유일한 이유는 는

document.body.style.backgroundImage = "background1.png";

출처

2012-01-07 15:33:06

, 그 특정 이미지를 선택했다는 의미 n은 모든 페이지의 뒷 배경이됩니다. 그게 내가 원하는 것 아니야. 다른 페이지에 대해 다른 배경을 제어 할 수 있기를 원합니다. 이 작업을 최선으로 수행 할 것을 권장 할 수 있습니까? 고맙습니다! –

웹 사이트가 각 페이지마다 다시로드되는 경우 각 페이지의 스타일 속성에 배경 이미지를 설정할 수 있습니다. 각 페이지마다 다시로드하지 않으면 자바 스크립트를 사용하여 배경 이미지를 설정할 수 있습니다. 및'document.body .style.backgroundImage = "background1.png"; ' –

감사합니다. –

css3 Z- 색인 문제가 작동하지 않습니까?

답변

관련 문제