將div位置相對於另一個靜態位置

Question

我正在嘗試使全屏網站也具有響應性，但是在較小的屏幕上，容器中的元素會溢出，而不是100％取決於容器中有多少物品。 使用方法：

top:100%; position:relative; width:100%; height:100%

僅當屏幕是特定尺寸時才有效，在使用該屏幕的移動設備上它不起作用，並且在前一個容器上顯示一半。 有沒有一種方法可以從元素的底部而不是頂部定位？

http://jsfiddle.net/q8tvwm2k/2/

更新：沒關系找到一個不錯的但可行的解決方案。

Answer 1

我敢肯定，您確實想要一個position:absolute要有另一個相對於它的div。 您只是沒有正確回答問題。 position:relative設置其子級可以position:absolute ，這是您要使用top等對象的位置。 這是您需要查看的結構：

的HTML

<div class='surround'>
  <div class='inside'>
    <div class='outer'>
      <div class='inner'>
      </div>
    </div>
  </div>
</div>

的CSS

.surround{
  position:relative;
}
.inside{
  height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
  height:100px; width:100px; position:relative;
}
.inner{
  position:absolute; top:30px; left:10px;
}