title: Twitter bootstrap glyphicon appears on top
body: <p>I have this problem with the glyphicons from TB. In this <a href="http://jsfiddle.net/e62Wu/19/" rel="nofollow">jsFiddle</a> you can see the <code>glyphicon glyphicon-search</code> appear on top of the <code>div</code> that slides under the purple square. </p>
  
  <p>To see this effect, press the button on the right side.</p>
  
  <p>My question is, how can I avoid that? By default, those glyphicons are <code>position:relative</code>, and I'd like to keep that.</p>
  
  <p>Can't post this unless I show some code..</p>
  
  <pre><code>$("#btn").click(function(){
  $('#slider').remove();
  
    var sliderDiv = "&lt;div id='slider' " +
        "class='alert alert-info alert-dismissable' " +
        "style='position: absolute; width:240px;'&gt; " +
        "&lt;button type='button' class='close' data-dismiss='alert' aria-hidden='true'&gt;&amp;times;&lt;/button&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare condimentum sapien, vitae pulvinar libero ultrices sit amet.&lt;/div&gt;";
      $(sliderDiv).insertAfter('#testing').hide().fadeIn('slow').wait(50000).slideUp('slow');
  });
  </code></pre>