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