배경 이미지를 사용하여 배경 이미지 조작

Question

레이어 순서를 조작하는 방법을 이해하려고합니다. 배경 이미지가 텍스트 위에있는 이유는 무엇입니까?

레이어와 z- 인덱스를 올바르게 가르쳐 줄 리소스에 누군가 링크 할 수 있습니까?

미리 감사드립니다.

http://jsfiddle.net/WqHjk/

CSS :

.trianglebackground { 
    background-image:url('http://www.zwaldtransport.com/images/placeholders/placeholder1.jpg'); 
    height:200px; 
    width:200px; 
    position:absolute; 
    z-index:1; 
} 
.testtext{ 
    position:inline; 
    z-index:1000; 
} 
.testbig{ 
    position:relative; 
} 

HTML : 위치가

인라인 설정되어 있기 때문에

<div class="col testbig" style="margin:auto;"> 
    <div class="trianglebackground"></div> 
    <div class="col testtext" style="height:501px;"> 
     <div>some text here </div> 
    </div> 
</div> 

Answer 1

는 그래서 절대 확인 또는 상대

4,은 물건을 많이 나타납니다 Z- 인덱스를 인터넷 검색, 직접 질문에 대답하기 z-index

http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Answer 2

에 대한 자세한 정보를 원하시면이 블로그를 살펴 보자.

구체적인 예제가 작동하지 않는 이유는 position:inline이 유효하지 않기 때문입니다. 위치는 : relative이어야합니다.

Answer 3

Z- 색인에 대해 알아야 할 두 가지 사항은 콘텐츠가 부모 Z- 색인과 마찬가지로 종속적이며 위치가 지정된 요소에서만 작동하며 정적 또는 정적 요소에 영향을 미치지 않는다는 것입니다. 인라인 요소.

사용 사례에 맞는 올바른 CSS가 있습니다.

.trianglebackground { 
    background-image:url('http://www.zwaldtransport.com/images/placeholders/placeholder1.jpg'); 
    height:200px; 
    width:200px; 
    position:absolute; 
    z-index:1; 
} 
.col.d11 { 
    z-index:2; 
    position:relative; 
}