Проблемы смещения позиции: абсолютная с отзывчивой компоновкой

Question

Я не совсем уверен, что мне нужно, но в настоящее время у меня есть неупорядоченный список, когда в режиме рабочего стола будет использоваться дисплей: встроенный блок для отображения двух изображений по горизонтали. Однако, когда в режиме планшета/портрет дисплей переключается на блокировку, чтобы сделать неупорядоченный список вертикально обычным способом.

Однако, усложняя вопросы, у меня есть два небольших фоновых изображения, которые я хочу наложить поверх каждого из основных изображений. Я использовал абсолютное позиционирование для достижения этого, однако при переключении на портретную форму (ширина < 750 пикселей) второе основное изображение накладывается поверх первого. Предположительно, это связано прежде всего с удалением от дисплея: встроенным блоком и постоянным использованием относительного/абсолютного позиционирования для основного фонового изображения и небольших фоновых изображений соответственно.

Я исправил это до некоторой степени, предоставив каждому элементу li определенную высоту (500 пикселей), однако намерение состоит в том, что эти две листы склеиваются, когда с помощью фиксированной высоты появляется промежуток (из-за того, что каждый li имеет ширина 100% (поэтому, независимо от размера планшета/телефона, изображение заполнит контейнер)).

Моя первая мысль заключалась в том, что высота: 100% подходит, но это просто приводит к тому, что второй li накладывает первый.

Вы можете видеть, что я намерен в приведенной ниже ссылке Codepen, если мой искаженный текст неясен (весьма вероятно). Любое руководство по обеспечению того, чтобы два элемента li оставались вместе, было бы с благодарностью получено. Даже если сказать, что предполагаемый эффект невозможен! Здесь также приведена краткая диаграмма.

http://codepen.io/grabeh/pen/uInrk

HTML:

<ul class="photo-list"> 
    <li> 
    <div class="image-holder"> 
    <img src="http://lorempixel.com/500/500"/> 
    <span><a class="flickr-link"></a></span> 
    <span class="upvote"></span> 
    </div> 

</li> 
<li> 
    <div class="image-holder"> 
     <img src="http://lorempixel.com/500/501"/> 
     <span><a class="flickr-link"></a></span> 
     <span class="upvote"></span> 
    </div> 
    </li> 
</ul> 

CSS:

.photo-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.photo-list li { 
    margin: 10px 10px 10px 0; 
    display:inline-block; 
    width: 48%; 
} 

.photo-list li:last-of-type { 
    margin: 10px 0 10px 0; 
} 

img { 
    border: none; 
    width: 100%; 
} 

.flickr-link { 
    background-image: url('http://lorempixel.com/40/40/'); 
    background-repeat:no-repeat; 
    width: 40px; 
    height: 40px; 
    float: left; 
    z-index: 100; 
    position: absolute; 
} 

.image-holder { 
    position: relative; 
} 

.image-holder img { 
    position: absolute; 
} 

.upvote { 
    background-image: url('http://lorempixel.com/40/40/'); 
    background-repeat:no-repeat; 
    width: 40px; 
    height: 40px; 
    float: left; 
    z-index: 100; 
    position: absolute; 
    margin-left: 50px; 
} 

@media handheld, only screen and (max-width: 750px) { 

.photo-list li { 
    display: block; 
    width: 100%; 
    height: 500px; 
    } 
} 

Answer 1

http://jsfiddle.net/xdXv2/

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

.flickr-link { 
    background-image: url('http://lorempixel.com/40/40/'); 
    background-repeat:no-repeat; 
    width: 40px; 
    height: 40px; 
    float: left; 
    z-index: 100; 
    top:0; /*added this*/ 
    position: absolute; 
} 

.image-holder { 
    position: relative; 
} 

.image-holder img { 
    /*removed absolute position here*/ 
} 

.upvote { 
    background-image: url('http://lorempixel.com/40/40/'); 
    background-repeat:no-repeat; 
    width: 40px; 
    height: 40px; 
    float: left; 
    z-index: 100; 
    position: absolute; 
    margin-left: 50px; 
    top:0; /*added this*/ 
} 

@media handheld, only screen and (max-width: 750px) { 

.photo-list li { 
    display: block; 
    width: 100%; 
    /*removed fixed height here*/ 
    } 
}