Make a div position relative to another that is static

Question

I'm trying to make a fullscreen site, also responsive, but on smaller screens the elements in the container overflow making it not 100% it varies depending on how many items are in it. Using:

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

works, only if the screen is a certain size, on mobile devices using that it doest work, and appears half on the previous container. Is there a way to position from the bottom of the element rather than top?

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

Update: Never minds found a pretty bad but working solution.

Answer 1

I'm pretty sure you really want a position:absolute to have another div relative to it. You just didn't word the question correctly. position:relative sets the point to which its children can be position:absolute , which is where you want to use top and the like. This is the structure you need to see:

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