Top to top

I have this problem with glyphics from TB. In this jsFiddle, you can see what is glyphicon glyphicon-searchdisplayed on top divthat slides under the purple square.

To see this effect, click the button on the right side.

My question is: how can I avoid this? By default, these are glyphics position:relative, and I would like to save this.

Can't post this if I don't show the code.

$("#btn").click(function(){
$('#slider').remove();

  var sliderDiv = "<div id='slider' " +
      "class='alert alert-info alert-dismissable' " +
      "style='position: absolute; width:240px;'> " +
      "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare condimentum sapien, vitae pulvinar libero ultrices sit amet.</div>";
    $(sliderDiv).insertAfter('#testing').hide().fadeIn('slow').wait(50000).slideUp('slow');
});
+3
source share
2 answers

Since it .alert-infois click-positioned, simply add:

.alert-info { 
    z-index: 10;
}

fiddle

+5
source

I added the property to the class .glyphicon:

.glyphicon
 {
 z-index : -5;
}
-2
source

All Articles