css - 如何使 2 div 响应 Position Absolute？

Question

我得到了以下结构

<div class="container">
    <div class="html5">
     <h3>HTML5</h3>
        </div>
        <div class="pc"></div>
    </div>

和 CSS

.pc {
    position: absolute;
    top: 81%;
    left: 38%;
    width: 321px;
    height: 240px;
    background-image: url('images/pc.png');
    background-size: cover;
}
.html5 {
    width: 321px;
    height: 240px;
    background-image: url('images/1.png');
    background-size: cover;
    position: absolute;
    top: 44%;
    left: 27%;
}

我想把我的 .html5 定位到 .pc 的某个点，有什么办法让它响应所以当调整网页大小时我仍然可以保持它与另一个 div 的距离相同？

我正在使用 bootstrap，不知道他的某个类是否有任何技巧。 JSFiddle

Answer 1

我认为您不能使用当前结构。我会建议这样的事情，并相对于 .pc 定位 .html5。

.pc {
  position: absolute; 
  ...
}

.html5 {
  position: relative;
  ...
}

<div class="container">
  <div class="pc">
    <div class="html5">
      <h3>HTML5</h3>
    </div>
  </div>
</div>