Question

I’m trying to have a div shown even when a modal (colorbox) is open. What I did was I set a higher z-index for it, however I have had no luck. Any thoughts?

Here’s the link

Code:

    <div id="facebooklike" class="facebooklike">
    <div class="facebookinner">
    bla bla bla

    </div>
    </div>

CSS:

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9997; overflow:hidden; box-shadow: 0px 0px 5px #000000;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

---

.facebooklike {
    background-image: url(images/likebackground.png);
    width: 230px;
    overflow:hidden;
    height: 70px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    z-index: 9999;

Thanks a lot everyone :)))

Answer 1

Default values of a div elements position are ‘static’. z-index doesn’t apply unless you change this value to relative or absolute etc in your CSS.

.facebooklike {
    background-image: url(images/likebackground.png);
    width: 230px;
    overflow:hidden;
    height: 70px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    z-index: 9999;
}