CODEWITHSUNDEEP
csshtmlhover
Smudger
Smudger

Reputation: 10781

have div hover on top of input boxes using css

I ave a div that popups up over my input boxes (javascrip auto complete). The div currently pops up behind the input boxes, how can I have this appear ontop?

screenshot of issue:

enter image description here

CSS Code is:

body {
        font-family: Helvetica;
        font-size: 11px;
        color: #000;
    }

    h3 {
        margin: 0px;
        padding: 0px;   
    }

    .suggestionsBox {
        position: absolute;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 200px;
        background-color: #000;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000; 
        color: #fff;
    }

    .suggestionList {
        margin: 0px;
        padding: 0px;
    }

    .suggestionList li {

        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }

    .suggestionList li:hover {
        background-color: #659CD8;
    }

HTML Code is:

    <div>
    <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
    </div>

Thanks as always for the help,

Upvotes: 0

Views: 2260

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157324

Try using z-index property on .suggestionsBox

.suggestionsBox {
    position: absolute;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #000;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000; 
    color: #fff;
    z-index: 999; <------ Here
}

Upvotes: 4

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Set the z-index property.

.suggestionsBox {
    position: absolute;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #000;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000; 
    color: #fff;

    z-index: 100;
}

Upvotes: 1

Related Questions