CSS IE7 不尊重 z-index

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1466695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:06:20  来源:igfitidea点击:

IE7 does not respect z-index

cssinternet-explorer-8internet-explorer-7z-index

提问by user48408

Running in compatibility mode the calendar below renders behind the textboxes below. IE8 displays the calendar how I need it to.

在兼容模式下运行,下面的日历呈现在下面的文本框后面。IE8 以我需要的方式显示日历。

My CSS

我的 CSS

.MyCalendar .ajax__calendar_container 
{
border:1px solid #7F9DB9; 
background-color: #ffffff; 
z-index : 1004 ;   
width:190px;
}

the textboxes which are overlaying the calendar don't have their z-index set anywhere although I have tried in my server side code to set their z-index to -1 if I detect IE7 to no avail. Any suggestions? alt text

覆盖日历的文本框没有在任何地方设置 z-index,尽管我已经尝试在我的服务器端代码中将它们的 z-index 设置为 -1,如果我检测到 IE7 无济于事。有什么建议? 替代文字

回答by rhodesjason

IE has problems with z-index. Most browsers treat the page as one continuous stacking context, but in IE, positioned elements generate a new stacking context, starting with a z-index value of 0.

IE 的 z-index 有问题。大多数浏览器将页面视为一个连续的堆叠上下文,但在 IE 中,定位元素生成一个新的堆叠上下文,从 z-index 值 0 开始。

As mentioned in this article:

如本文所述:

http://trwa.ca/2012/03/ie-z-index-bug-and-how-to-squash-it/

http://trwa.ca/2012/03/ie-z-index-bug-and-how-to-squash-it/

try giving the calendar's parent element an even higher z-index.

尝试给日历的父元素一个更高的 z-index。

回答by leymannx

I finally got it on top with an additional transparent background image. IE8. SASS:

我终于用一个额外的透明背景图像把它放在了上面。IE8。萨斯:

  #galerie-link {
    position: absolute;
    z-index: 1000;
    top: 25px;
    left: 40px;
    a {
      display: block;
      width: 185px;
      height: 90px;
      background-image: url(../images/transparent.png);
    }
  }