이미지 위에 오버플로되는 div 표시

div가 있고 두 컨테이너의 오버플로가 모두 .tl-object-container이고 .header입니다. 이 시나리오에서는 .top-level-object을 다른 모든 요소 앞에 표시하는 것이 내 목표입니다. z 인덱싱을 시도했지만 작동하지 못했습니다. 이미지를 제거하면 그 예제가 작동하는 것을 분명히 알 수 있기 때문에 어떤 이유로 이미지가 이러한 종류의 동작을하는 유일한 것입니다.이미지 위에 오버플로되는 div 표시

사이드 참고 : 페이지의 다른 개체가 서식 점유하는 공간에 의존하기 때문에 내가 .top-level-object에 position:absolute;을 설정할 수 없습니다.

무엇이 누락 될 수 있습니까? position: relative; 사용함으로써

.header { 
 
    height: 100px; 
 
    width: 100%; 
 
    overflow: visible; 
 
    background-color: rgba(127, 127, 127, 0.3); 
 
} 
 
.tl-object-container { 
 
    width: 400px; 
 
    height: 1px; 
 
    float: right; 
 
    overflow: visible; 
 
    background-color: rgba(127, 127, 127, 0.3); 
 
} 
 
.top-level-object { 
 
    height: 1000px; 
 
    width: 100%; 
 
    background-color: rgba(127, 127, 127, 0.3); 
 
} 
 
.object-covering-tl-object { 
 
    width: 100%; 
 
    background-color: blue; 
 
} 
 
.object-covering-tl-object img { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 
.object-not-being-covered-by-tl-object { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: rgba(127, 127, 127, 0.3); 
 
}

<div class="header"> 
 
    <div class="tl-object-container"> 
 
    <div class="top-level-object"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="object-covering-tl-object"> 
 
    <img src="http://www.jssor.com/img/home/01.jpg" alt="Random Image" /> 
 
</div> 
 
<div class="object-not-being-covered-by-tl-object"> 
 

 
</div>

출처

2016-07-20 ExcellentSP

'position : absolute;'반드시'z-index'를 사용할 필요는 없습니다 -'position : relative;'를 설정하고'z-index'를 조정할 수 있습니다. – Toby

@Toby, 알아요. 그것은 단지 부수적 인 것이었다. 그러나 당신이 실제 사례를 가지고 있지 않다면 나는 여전히 그것을 작동시킬 수 없습니다 ....? – ExcellentSP

죄송합니다. 귀하가 성취하고자하는 것을 시각화하는 데 어려움을 겪고 있습니다. - 어떤 것이 효과가 있고 어떤 효과가 없는지 말할 수 있습니까? 테두리를 추가하고 불투명도 레벨을 변경하여 더 명확하게 나타 냈습니다. http://jsbin.com/yewajen/edit?html,css,output – Toby

그러면 z-index 조정할 수 - 차이가 정적 인 경우에 "절대"인 반대 위치는, 소자의 위치에 기초하여 조정하는 것이 되 부모 요소

출처

2016-07-20 22:37:45 Toby

이미지 위에 오버플로되는 div 표시

답변

관련 문제