HTML + CSS z- 인덱스가 작동하지 않습니다.

내 z- 인덱스가 작동하지 않고 div가 위 (y- 축)에 있고 z- 축) 다른 div.HTML + CSS z- 인덱스가 작동하지 않습니다.

이것은 분명히 분명하지만 내 코드에는 문제가 없습니다. 아무도 내가 잘못 가고있는 곳을 찾을 수 있습니까? 너무 쉬워야하지만 솔루션을 찾을 수 없기 때문에 너무 좌절하고 있습니다.

<style> 
.greenleftarrow{ 
position: relative; 
z-index:10; 
display:block; 
background:#fff url(./images/greenleftarrow.jpg) no-repeat; 
left:10px; 
top: 0px; 
height:140px; 
opacity:0.5; 
filter:alpha(opacity=50); 
} 

</style> 


<body id="body1" style="position: relative; z-index:-1; height: 510px;" onload="javascript:showAndroidToast('1'); inspectLang(); getDocHeight()"> 
<div class="greenleftarrow" id="greenleftarrow" ></div> 
<div style="position: relative; z-index:-1;">body body body body</div> 
</body>

출처

2011-12-07 Elaine McGovern

그래서 당신이 사업부의 상단에있는 화살표를 원하는? 위치 제거 : 본문에 상대적인 & div 및 위치 바꾸기 : 위치에 상대적 : 화살표에 절대? – ptriek

나는 당신이 달성하고자하는 것이 무엇인지 명확하게 알지 못합니다 - 라이브 예제 (jsFiddle 또는 유사) 또는 이미지를 게시 할 수 있습니까? .greenleftarrow를 상대적으로 위치 시키려고하는 것은 무엇입니까? 나는 또한 몸 자체에 왜 음의 z- 인덱스를 적용하는지 혼란 스럽습니다. – CherryFlavourPez

글쎄, 음의 z- 색인은 좌초에서 벗어났다. 왜냐하면 1의 초기 z- 색인이 무시 되었기 때문이다. 나는 미래에보다 포괄적 인 게시를 위해 jsFiddle을 시도해야 할 것입니다. 감사합니다 –

화살표의 위치를 절대로 변경하십시오. 만약 내가 제대로 이해하고

.greenleftarrow{ 
    position: absolute; 
    z-index:10; 
    display:block; 
    background:#fff url(./images/greenleftarrow.jpg) no-repeat; 
    left:10px; 
    top: 0px; 
    height:140px; 
    opacity:0.5; 
    filter:alpha(opacity=50); 
    }

출처

2011-12-07 12:18:52 Pedryk

내가 원한다! 내가 그렇게하면 그냥 사라진다 !! 그것은 배경 이미지이기 때문입니까? –

최소 너비와 높이를 배경 이미지의 크기로 설정하면 위치 절대 값이 적용됩니다. 결국 빈 div는 바로 빈 div입니다. 멍청한 실수! –

, 당신은 greenleftarrow에 위쪽으로 두 번째 DIV를 이동하는 음의 위쪽 여백을 사용할 수 있습니다

http://jsfiddle.net/XSH2Y/

출처

2011-12-07 12:24:22 ramblex

나는 저에게 그것을 연결하기를위한 jsfiddle 감사를 사랑한다. 내 즐겨 찾기 목록에 추가되고 있습니다. –

빠른 질문 비록, #over { margin-top : -140px; } greenleftarrow 클래스에서 배경 이미지의 높이를 알아야합니까? –

예. greenleftarrow에 배경 이미지 만있는 경우 두 번째 div에 div를 추가하고 div에 최소 높이를 부여하십시오 – ramblex

HTML + CSS z- 인덱스가 작동하지 않습니다.

답변

관련 문제