title: Positioning the label over the input, How-To?
body: <p>I'm trying to position the labels on the inputs but seems like they are not moving on them until i change their position to <code>absolute</code> (which i don't need).</p>
  
  <p>Here is an example of my code:</p>
  
  <pre><code>  &lt;label for="username"&gt;Your Email...&lt;/label&gt;
    &lt;input name="username" class="field" type="text" id="username" maxlength="40" /&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>label {
      color:#373737;
      font-weight:bold;
      font-family:Tahoma, Geneva, sans-serif;
      font-size:18px;
      margin-left:8px;
      margin-top:28px;
      }
  </code></pre>
  
  <p>And here is what i get:</p>
  
  <p><img src="https://i.stack.imgur.com/02G87.jpg" alt="The result"></p>
  
  <p>Now here is the thing I'm trying to duplicate and for some weird reason it works here but not on my side. <a href="http://jsfiddle.net/mohsen/EM7Pz/" rel="nofollow noreferrer">The demo I'm trying to duplicate with my own CSS properties</a></p>