Internet Explorer 中的 Z 索引

发布于 2024-09-11 20:48:46 字数 543 浏览 4 评论 0原文

我正在尝试让 z-index 在我的 HTML 代码中工作。我在几个地方查过这个，它说我需要向我的 div 添加一个位置。我已经这样做了，但它仍然不起作用。下面是我用于 z-index 的 CSS 和 HTML。

CSS：

.Location{
    width: 1000px;
    margin-top: 50px;
    margin-left: auto;
    margin-bottom: 0px;
    margin-right: auto;
}

.logo{
     background-color: white;
     position: relative;
     left: 40px;
     float: left;
     width: 225px;
     z-index: 10;
     padding-left: 15px;
     padding-bottom: 20px;
     padding-top: 20px;
}

原文

I am trying to get the z-index to work in my HTML code. I have looked this up at several places, and it says that I need to add a position to my div. I've already done this and it still isn't working. Below is the CSS and the HTML that I used for the z-index.

CSS:

.Location{
    width: 1000px;
    margin-top: 50px;
    margin-left: auto;
    margin-bottom: 0px;
    margin-right: auto;
}

.logo{
     background-color: white;
     position: relative;
     left: 40px;
     float: left;
     width: 225px;
     z-index: 10;
     padding-left: 15px;
     padding-bottom: 20px;
     padding-top: 20px;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故人的歌 2024-09-18 20:48:46

您所得到的应用 z-index 是正确的：相对、固定或绝对类型的位置。 IE 的问题在于，它不像其他浏览器那样在整个文档中全局应用元素的 z 索引。

在 IE 中，z-index 仅适用于堆叠上下文，该上下文由任何应用了相对、固定或绝对位置的元素自动创建。

因此，您很可能会得到以下结果，这就是 z-index 无法按您预期工作的原因：

<div style="position: relative">
   <div style="position: relative; z-index: 1;">
   </div>
</div>
<div style="position: relative">
   <div style="position: relative; z-index: 2;">
   </div>
</div>

在上面，所有浏览器但 IE 总是将 z- index: 2 div 位于 z-index: 1 之上。但是，IE 并不总是这样，因为这两个元素都在自己的堆叠上下文中，因此它们的 z-index 并不适用于彼此。

解决方法是将 z-index 添加到创建单独堆叠上下文的父元素：

<div style="position: relative; z-index: 1;">
   <div style="position: relative;">
   </div>
</div>
<div style="position: relative; z-index: 2;">
   <div style="position: relative;">
   </div>
</div>

What you've got is correct to apply z-index: a position of type relative, fixed or absolute. The problem with IE is that it doesn't apply the z-index of an element globally across the entire document as it does in other browsers.

In IE, z-index is only applied within a stacking context, which is automatically created by any element that has position relative, fixed or absolute applied to it.

As a result, you've most likely got the following, which is why z-index isn't working as you'd expect:

<div style="position: relative">
   <div style="position: relative; z-index: 1;">
   </div>
</div>
<div style="position: relative">
   <div style="position: relative; z-index: 2;">
   </div>
</div>

In the above, all browsers but IE will always put the z-index: 2 div above the z-index: 1. However, IE won't always because both elements are in their own stacking context and therefor their z-index's don't apply to each other.

The fix is to add z-index to the parent elements that are creating the separate stacking context:

<div style="position: relative; z-index: 1;">
   <div style="position: relative;">
   </div>
</div>
<div style="position: relative; z-index: 2;">
   <div style="position: relative;">
   </div>
</div>

回复收藏 0 原文