Проблемы с <picture> Элемент изображения изображения героя выше <header> intro текстовое поле

Question

Я обновляю свой портфолио на сайте, и я переключил изображение своего героя в своем резюме, чтобы использовать этот элемент, чтобы я мог делать отзывчивое направление искусства.

У меня есть текстовое поле, наполовину перекрывая изображение вроде этого:

По какой-то причине фона окна рендеринга под картинкой:

Это мой первый раз делает что-то с отзывчивым srcset и элементом изображения. Это связано с тем, какой порядок элементы отображаются на странице, например, в javascript или что-то в этом роде?

EDIT: Кроме того, уже пробовали установить z-индекс, и они устанавливаются правильно в соответствии с элементом проверки. Я бы опубликовал код, но этот проект очень большой, и я не хочу наводнять страницу слишком много информации. Это прежде всего вопрос спецификации html5, а не проблема синтаксиса, поэтому я считаю, что он должен отвечать на основе информации, которую я предоставил.

Answer 1

Необходимо установить z-index, чтобы правильно позиционировать его над элементом изображения. Простой пример того, что вы хотите достичь ниже -

<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.

Надеюсь, это поможет.