Css 问题混合位置：绝对响应布局

我不完全确定我想要的是什么，但目前我有一个无序的列表，在桌面模式下，我将使用display:inline块水平显示两个图像。但是，在平板电脑/纵向模式下，显示器切换到“块”以使无序列表以通常方式垂直显示

然而复杂的事情，我有两个小的背景图像，我想覆盖在每一个主要的图像。我使用绝对定位来实现这一点，但是当切换到纵向形式（宽度<750px）时，第二个主图像覆盖在第一个主图像上。 这可能主要是由于远离显示：内联块，以及分别对主背景图像和小背景图像继续使用相对/绝对定位

我通过给每个li元素一个特定的高度（500px）在一定程度上解决了这一问题，但目的是当使用固定高度时，两个li粘在一起，最终会出现一个间隙（因为每个li的宽度为100%（因此，无论平板电脑/手机大小，图像都会填满容器））

我的第一个想法是高度：100%是合适的，但这只会导致第二个li覆盖第一个li

如果我的乱码文本不清楚（很可能），你可以在下面的代码笔链接中看到我的意图。对于确保两个li元素保持在一起的任何指导，我们将不胜感激。即使是说预期的效果是不可能的！下面还有一个简图

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>

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

您的主图像不必绝对定位。只有较小的图像才会这样做，因为它们必须坐在上面。将主图像放回文档流将再次为列表项提供高度，这意味着您不再需要为它们提供固定的高度

.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*/
  }
}

---

哇，非常感谢。恐怕我不熟悉top属性可以做什么，所以这非常有用。感谢您抽出时间回答。