CODEWITHSUNDEEP
htmlcss
Frank Castle
Frank Castle

Reputation: 345

Button behind Div should be blocked behind but somehow it is still showing

I have a search box that populates a drop down menu via AJAX call. anyways, the DIV that holds the search results hovers over some other content. and the issue I am having is that the Cancel BUTTON that is part of the DIV that is suppose to be BEHIND the search drop down box is not being covered for some reason, and I can't for the life of me determine why... any suggestions here? image of the output is below..

enter image description here

Here is my view script which populates the data:

<li class="user-list-item">
<div class="search-list-item-container">
    <table>
        <tr>
            <td><?php echo $this->username; ?></td>
        </tr>
    </table>
</div>

CSS:

.button { 
display: inline-block;
float: left;
}
.button:hover {
background: #74D9EB;
color: #ffffff;
}
#display{
width:450px;
display:none;
float:left;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden ;
position: absolute;
background: white;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* -moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666; */
 }
 .display_box{
padding:4px; 
/* border-top:solid 1px #dedede;  
border: 2px solid #000000;*/
font-size:12px;
max-height:350px;
overflow-y: scroll;
overflow-x: hidden;
opacity: 0.5;
 }

 .user-list-item{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
 }
 .user-list-item:hover{
background:#3dcbe4;
color:#FFFFFF;

 }
 #shade{
background-color:#00CCFF;
 }

Upvotes: 1

Views: 54

Answers (3)

TheLifeOfSteve
TheLifeOfSteve

Reputation: 3288

This looks like a z-index issue. Try adding z-index: 9999 to the dropdown.

Upvotes: 1

adswebwork
adswebwork

Reputation: 5485

The html section you included looks incomplete - and the css references classes and id's not in the html -

Please update the references accordingly - Depending on your syntax, it may just be a z-index issue - wont know for sure until your code is updated.

z-index:9999 is overused - when z-index:1 and 2 will do just fine

Upvotes: 1

WackyWalrus
WackyWalrus

Reputation: 324

This looks like a z-index issue. Try adding

z-index: 9999;

to #display

Upvotes: 1

Related Questions