CODEWITHSUNDEEP
csscss-float
Alvaro
Alvaro

Reputation: 41605

Positioning fixed element over a floating one

I am trying to position a fixed element over a floating one. For it, i am using the z-index property but it seems it is not working with fixed elements.

In this example I am trying to position the word text over the white floating box. http://jsfiddle.net/imac/Pkrqw/1/

Is it possible to do what I am trying to?

These are the styles I'm applying:

.footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:40px;
    background:#ccc;
    color:#000;
}

.floatingBox{
    position:absolute;
    bottom:0;
    width:480px;
    height:80px;
    background:#fff;
    border:1px solid #000;
    left:80px;

    z-index:100;  /* LOWER THAN .text Z-INDEX*/
}
.text{
    display:inline;
    z-index:999; /* HIGHER THAN .floatingBox Z-INDEX*/
}

And this is the HTML for the example:

<div class="floatingBox"></div>
<div class="footer"> This is just a demo <div class="text">text</div></div>

Upvotes: 0

Views: 348

Answers (1)

Morpheus
Morpheus

Reputation: 9065

You need to give position to your text div for z-index to take effect. Just add:

.text{
    display:inline;
    z-index:999; /* HIGHER THAN .floating Z-INDEX*/
    position: relative;
}

Upvotes: 1

Related Questions