div分层问题 [英] div layering problems

问题描述

我正在开发一个内部服务器上的现有Web应用程序，我不能真正地发布所有的代码在这里，因为它是非常混乱，但我可以告诉你们的问题和相关的CSS代码的截图：

语言菜单应该在蓝色边框框的顶部，而应该在底部。

这是一个IE7屏幕截图

蓝色边框css：

  .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：

  #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; 
} 
  

注意：语言菜单使用javascript切换显示/隐藏。 / p>

EDIT：
在语言框中添加z-index不会更改IE中的公开范围

解决方案

IE7已知有 z-index 的问题。没有看到您的网页，我能做的最好的是指向一些有用的链接，解释问题：

• http://brenelz.com/blog/squish-the-internet-explorer-z- index-bug /


• ie7 z-index问题


• http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

一般的想法是poke position：relative （通常删除它）和 z-index

祝你好运！

I am developing for an existing web application on an internal server, I can't really post all the code here as it's very very messy but I can show you guys a screenshot of the problem and the relevant css code:

The languages menu should be on top of the blue bordered box, but instead it's beneath.

It works great in FF, this is a IE7 screenshot

blue bordered box css:

.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;
}

language menu css:

#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 is using a javascript toggle to show/hide.

EDIT: Adding z-index to the language box does not change the visibility in IE

解决方案

IE7 has known problems with z-index. Without seeing your page, the best I can do is point you to some useful links which explain the problem:

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

The general idea is to poke position: relative (usually remove it) and z-index on parent elements of your drop down until it's fixed.

Good luck!

这篇关于div分层问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！