Problems with div breakdown

Question

I am developing for an existing web application on an internal server, I cannot really publish all the code here, since it is very very dirty, but I can show you guys a screenshot of the problem and the corresponding css code:

The language menu should be on top of the blue rectangle, but instead it is lower.

It works fine in FF, this is IE7 screenshot

css blue frame:

.categoryBox {
    width:100px;
    background-color:#000;
    border-style:solid;
    border-width:1px;
    border-color:#007CF7;
    padding:5px;
    float:left;
    height:260px;
    margin-right:25px;
    margin-bottom:20px;
    text-align:center;
    width:200px;
    position:relative;
}

css language menu:

#ChooseLanguageDlg
{
    display: none;
    position: absolute;     
    width: 87px; 
    height: 180px; 
    padding-left: 10px;
    padding-right: 10px;
    padding-top:0;
    margin-top: -9px;
    border: none 1px White;
    left: 751px;
    top: 10px;
    font-size:11px;
    overflow:hidden;
    text-align:center;
}

Note. The languages ​​menu uses the javascript switch to show / hide.

EDIT: Adding a z-index to a language field does not change visibility in IE

Answer 1

IE7 z-index. , , , , :

• http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
• Layout Z-Index IE7
• http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

, position: relative ( ) z-index , .

!

Answer 2

z-index . , , .

Answer 3

You can try adding z-index. This will determine which element is above the element: z-index

Answer 4

add z-index to style for language field?

Answer 5

IE has some problem with z-index (see google). Since I had to fix a similar problem, I was forced to use javascript to hide background elements that didn't suit you.

You can try changing the order of creation in the html code, if possible.