title: CSS div in bottom not showing if applied margin
body: <p>I'm trying to achieve the following:</p>
  <p><a href="https://i.stack.imgur.com/CvLFl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CvLFl.png" alt="enter image description here" /></a></p>
  <p>I was able to replicate the image but only if my div is not floating in the page (without the margin applied and without the <code>position: absolute</code>), otherwise I can't see the green rectangle.</p>
  <p>My HTML structure is the following:</p>
  <pre><code>&lt;div class=&quot;app&quot;&gt;
    &lt;div class=&quot;interface&quot;&gt;
      &lt;div class=&quot;view&quot;&gt;
        &lt;div class=&quot;body&quot;&gt;
          &lt;div class=&quot;top&quot;&gt;
            Top content
          &lt;/div&gt;
          &lt;div class=&quot;middle&quot;&gt;
            Middle content
          &lt;/div&gt;
          &lt;div class=&quot;bottom&quot;&gt;
              Bottom content
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>In the <code>.interface</code> CSS I have the following:</p>
  <pre><code>.interface
  {
    position: absolute;
    top: 15%;
  }
  </code></pre>
  <p>With this CSS I'm unable to see the green rectangle. If I remove the <code>position: absolute</code> (and therefore the <code>top: 15%</code> stops applying) I'm able to see the green rectangle.</p>
  <p>You can see the issue in this <strong>JSFiddle</strong>: <a href="https://jsfiddle.net/v9euwdz3/" rel="nofollow noreferrer">https://jsfiddle.net/v9euwdz3/</a></p>
  <p>So, how do I manage to have the DIV showing at a certain level (margin from top) and without compromise my HTML structure?</p>