title: why do spans overlap
body: <p>I have a table with a cell that contains two spans, the first containing a span and and input. I want these to overlap (I use them to create an edit-in-place). So I set the parent span positioning to relative and set their position to absolute with left: 0. When I do that, the second top span also moves to the left of the cell. Why? How to fix (I want the inner span and input to overlap)</p>
  
  <p>UPDATE: Note that the input is used for edit-in-place, so the other span needs to be positioned after it. Otherwise, when I remove the visibility style (by toggling a class), then it will overwrite the second span. I've updated the fiddle, so it shows bot the span and the input.</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/jvyLtr82/5/" rel="nofollow">http://jsfiddle.net/jvyLtr82/5/</a></p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;span class="first"&gt;
                      &lt;span&gt;hi&lt;/span&gt;
                      &lt;input value="hi"/&gt;
                  &lt;/span&gt;
                  &lt;span&gt; there&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.first {
      position:relative;
  }
  
  .first &gt; * {
      position: absolute;
  }
  .first &gt; span {
  
      left: 0;
  }
  
  .first &gt; input {
      left: 0;
  }
  </code></pre>