Quoter Quoter - 1 year ago 103
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
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
, and I'd like to keep that.

Can't post this unless I show some code..


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>";

Answer Source

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

.alert-info { 
    z-index: 10;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download