Quoter Quoter - 3 months ago 12
CSS Question

Twitter bootstrap glyphicon appears on top

I have this problem with the glyphicons from TB. In this jsFiddle you can see the

glyphicon glyphicon-search
appear on top of the
div
that slides under the purple square.

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

My question is, how can I avoid that? By default, those glyphicons are
position:relative
, and I'd like to keep that.

Can't post this unless I show some 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');
});

Answer

Since .alert-info is positioned on click, just add:

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

fiddle

Comments