title: Position a Bootstrap 3.0 label directly on top of an input field without pushing content down
body: <p>I have a bootstrap 3.0 horizontal form.</p>
  
  <p>I am appending, using jquery, a Bootstrap label directly before the form-group div.</p>
  
  <pre><code>&lt;form role="form" class="form-horizontal" id="form-newUser"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="control-label col-md-4" for="inputUser"&gt;New User&lt;/label&gt;
          &lt;div class="input-group input-group-sm col-md-6"&gt;
              &lt;span class="input-group-addon"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;input type="text" class="form-control" id="inputUser" placeholder="Username" xy="left" rqd="required"&gt;
          &lt;/div&gt;
          &lt;span class="label label-warning field-error field-error-horizontal col-md-offset-4"&gt;&lt;i class="icon-warning-sign"&gt;&lt;/i&gt; '+errorMessage+'&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;...
  </code></pre>
  
  <p>Id like to position this label directly over the input field so that the error message looks like it is being displayed inside the input text field.</p>
  
  <p>I can do this using some css but it keeps pushing the content down between each field where the span would normally be show in the html.</p>
  
  <p>I need to be able to position relatively and float at the same time. </p>
  
  <p>Can this be done?</p>