<picture>와 관련된 문제점 요소 영웅 이미지 렌더링 위의 인트로 텍스트 상자

Question

내 포트폴리오 웹 사이트를 업데이트하고 있습니다. 이력서에서 내 영웅 영웅 이미지를 전환하여 요소를 사용하여 반응하는 아트 방향을 사용할 수있게했습니다.

내가 텍스트 상자의 절반이 같은 종류의 이미지를 겹쳐있어

: 이건 내 처음으로하고있다

: 상자 배경 그림 아래에 렌더링되는 몇 가지 이유를 들어

응답 성이 뛰어난 srcset과 picture 요소가있는 것입니다. 이것은 요소가 페이지에서 렌더링되는 순서와 관련이 있습니까? 예 : javascript 또는 그 밖의 항목?

EDIT : 또한, 이미 Z- 인덱스를 설정했는데, 이들은 소자 검사에있어서 올바르게 설정되어있다. 코드를 게시 하겠지만이 프로젝트는 매우 커서 페이지를 너무 많은 정보로 넘치고 싶지 않습니다. 이것은 주로 html5 스펙 질문이며 구문 문제가 아니므로 필자가 제공 한 정보를 기반으로 답할 수 있어야한다고 생각합니다.

필요한 z-index

Answer 1

는 화소 위에 정확하게 위치를 설정할 수있다. 당신이 무엇을 달성하고자하는 기본적인 예는 다음과 같습니다 -

<div class="container"> 
    <picture> 
    <source srcset="http://i.stack.imgur.com/t6otx.png" media="(min-width: 1000px)"> 
    <img src="http://i.stack.imgur.com/t6otx.png" alt=""> 
    </picture> 
    <div class="box"> 
     <h1>Hello world</h1> 
    </div> 
</div> 

그리고 CSS

.container{ 
    position: relative; 
} 
.box{ 
    position: absolute; 
    z-index: 2; 
    top: 40px; 
    left: 40px; 
    background: yellow 
} 

참고 그 위치 요소 z-index 작동합니다. 이 JSFiddle을 확인하십시오.

희망이 도움이됩니다.