title: CSS overlapping elements without absolute positioning
body: <p>I want a parent class (<code>ul</code> tag) to hold a bunch of <code>li</code> tags to that overlap each other, here is my code:</p>
  
  <pre><code>&lt;ul class="overlap"&gt;
      &lt;li&gt;
          Overlap One
      &lt;/li&gt;
      &lt;li&gt;
          Overlap Two
      &lt;/li&gt;
      &lt;li&gt;
          Overlap Three
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I don't want them to be positioned absolutely, because I have a parent element that has a background border and color, but when I position the children absolutely, the parent doesn't stretch, here is the code in its entirety.</p>
  
  <pre><code>&lt;blockquote&gt;
   &lt;ul class="overlap"&gt;
      &lt;li&gt;
          Overlap One
      &lt;/li&gt;
      &lt;li&gt;
          Overlap Two
      &lt;/li&gt;
      &lt;li&gt;
          Overlap Three
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/blockquote&gt;
  </code></pre>
  
  <p>The <code>blockquote</code> tag has a background color on to it, that is why the children cannot be positioned absolutely.</p>
  
  <p>Thanks in advance for the help!</p>