title: Absolute positioning ignoring padding of parent
body: <p>How do you make an absolute positioned element honor the padding of its parent? I want an inner div to stretch across the width of its parent and to be positioned at the bottom of that parent, basically a footer. But the child has to honor the padding of the parent and it's not doing that. The child is pressed right up against the edge of the parent.</p>
  <p>So I want this:</p>
  <p><img src="https://i.stack.imgur.com/PNk2V.png" alt="enter image description here" /></p>
  <p>but I'm getting this:</p>
  <p><img src="https://i.stack.imgur.com/ADkGU.png" alt="enter image description here" /></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;html&gt;
        &lt;body&gt;
          &lt;div style="background-color: blue; padding: 10px; position: relative; height: 100px;"&gt;
            &lt;div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;"&gt;css sux&lt;/div&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I can make it happen with a margin around the inner div, but I'd prefer not to have to add that.</p>