title: Positioning element exactly over other element in css
body: <p>I have some elements sharing certain css. Now I would like one element to have a covering div over it with some text in it. An example can be seen <a href="http://jsfiddle.net/FBjQV/1/" rel="nofollow">here</a>. Currently it's kind of 'guessed' in place, but you can see differences between browsers so I doubt getting the pixels exactly right would change anything.</p>
  
  <p>Currently, my method to get this is inserting a <code>&lt;div&gt;</code> with the same properties, but it's a lot of duplicate code and isn't perfect.</p>
  
  <p>Here's the <strong>HTML</strong>:</p>
  
  <pre><code>&lt;!-- regular non-locked element --&gt;
  &lt;a href='#' class='level yellow'&gt;
      &lt;h1&gt;Level 1&lt;/h1&gt;
      &lt;div class='score'&gt;score&lt;/div&gt;
      &lt;h2&gt;248&lt;/h2&gt;
      &lt;input type='text' value='20' class='dial' /&gt;
  &lt;/a&gt;
  
  &lt;!-- locked element --&gt;
  &lt;div class='level yellow'&gt;
      &lt;h1&gt;Level 1&lt;/h1&gt;
      &lt;div class='score'&gt;score&lt;/div&gt;
      &lt;h2&gt;0&lt;/h2&gt;
      &lt;input type='text' value='0' class='dial' /&gt;
      &lt;div class='locked'&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;You still need to unlock this level!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.level {
      border-radius: 20px;
      -webkit-border-radius:20px;
      -moz-border-radius: 20px;
      width:150px;
      height:220px;
      padding:10px;
      border-width: 1px;
      border-style: solid;
      background-color:transparant;
      color:#8C9695;
      margin:15px auto 0px auto;
      cursor:pointer;
      position:relative;
      display:block;
      text-decoration:none;
      transition: background-color 0.3s, color 0.3s;
      -webkit-transition: background-color 0.3s, color 0.3s;
      text-align:center;
  }
  .level:hover:not(&gt; .locked){
      color: white;
  }
  .locked {
      background-color:rgb(0, 0, 0);
      background-color:rgba(0, 0, 0, 0.8);
      width:172px;
      height:242px;
      position:relative;
      top:-135px;
      left:-10px;
      border-radius:15px;
      -webkit-border-radius:15px;
      -moz-border-radius:15px;
      z-index:20;
      cursor:default;
      transition:0.3s;
      color:transparent;
      text-align:center;
  }
  .locked:hover{
      color:white;
  }
  </code></pre>