title: CSS cover existing element
body: <p>I'm using jQuery to create an element that exactly overlays any existing one. That's the intention, at least.</p>
  
  <p>The context is similar to what goes on here:<br>
  <a href="http://www.alistapart.com/articles/makingcompactformsmoreaccessible/" rel="nofollow">A List Apart: Making Compact Forms More Accessible</a></p>
  
  <p>The idea is that you have an element, such as an <code>&lt;input&gt;</code>, and under certain conditions you display another element (in this case a <code>&lt;label&gt;</code>) absolutely positioned on top of it as a hint. Though the general principle is useful in other scenarios as well.</p>
  
  <p>There are several existing libraries that do this sort of thing, but they all seem to break down along the same lines. </p>
  
  <p><strong>The naive approach:</strong></p>
  
  <ul>
  <li>Create the cover element with <code>display:block</code> and <code>position:absolute</code>.</li>
  <li>Set the <code>left</code> and <code>top</code> of your cover element to match your covered element</li>
  </ul>
  
  <p><em>Problem: The cover's position no longer matches whenever the page layout changes, such as hiding a paragraph or resizing the display.</em></p>
  
  <p><strong>A slightly improved approach:</strong></p>
  
  <ul>
  <li>Create the cover element with <code>display:block</code> and <code>position:absolute</code></li>
  <li>Add the cover element immediately <em>before</em> the covered element in the DOM</li>
  <li>Set the bottom and right margin of the cover to the negative height and width of the cover</li>
  </ul>
  
  <p><em>This approach solves the problem with fluid layouts, but it adds a problem such that if the covered element is within an <code>inline</code> block, the cover will create a linebreak when it shows up (because of insertion of a block element).</em></p>
  
  <p>Presumably this is a problem that has been solved already somewhere by someone.</p>