IE6和IE7父zIndex问题

发布于 2024-09-06 18:57:06 字数 713 浏览 3 评论 0原文

据我了解。我需要将 div 2 放在 div 3 前面。如何在 IE6 和 IE7 中执行此操作。所有其他浏览器都工作正常。这是我的代码。

CSS

    div {
        position:absolute;
    }
    #div1 {
        background:#0F9;
        top:0;
        left:0;
        width:500px;
        height:400px;
    }

    #div2 {
        background:#C00;
        top:20px;
        left:280px;
        width:100px;
        height:100px;
        z-index:3;
    }

    #div3 {
        background:#006;
        top:10px;
        left:10px;
        width:300px;
        height:200px;
        z-index:2;
    }

代码

<div id="div1">
    <div id="div2"></div>
</div>

<div id="div3"></div>

原文

For my understand. I need to put div 2 in front of div 3. How can I do this in IE6 and IE7. All of others browsers works normal. Here is my code.

CSS

    div {
        position:absolute;
    }
    #div1 {
        background:#0F9;
        top:0;
        left:0;
        width:500px;
        height:400px;
    }

    #div2 {
        background:#C00;
        top:20px;
        left:280px;
        width:100px;
        height:100px;
        z-index:3;
    }

    #div3 {
        background:#006;
        top:10px;
        left:10px;
        width:300px;
        height:200px;
        z-index:2;
    }

Código

<div id="div1">
    <div id="div2"></div>
</div>

<div id="div3"></div>

分享到QQ

分享到微博

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

发布评论

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

卸妝后依然美 2024-09-13 18:57:07

我在IE6/7/8、Chrome和Firefox中测试了以下内容。这会将 #two 置于 #one 和 #third

HTML :

<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <div id="content">
       <div id="one">One</div>
       <div id="two">Two</div>
       <div id="three">Three</div>
    </div>
  </body>
 </html>

CSS:

 #one{
     background-color: #f1f1f1;
     position: absolute;
     left:105px;
     top:155px;
     z-index: 0;
 }
 #two{
     background-color: #c9c9c9;
     position: absolute;
     left:100px;
     top:145px;
     z-index: 1;
 }
 #three{
       background-color: #888888;
       color: #f1f1f1;
       position: absolute;
       left:95px;
       top:135px;
       z-index: 2;
 }

实际操作中： http://www.webdevout.net/test?02C

I have tested the following in IE6/7/8, Chrome, and Firefox. This puts #two in between #one and #three

HTML :

<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <div id="content">
       <div id="one">One</div>
       <div id="two">Two</div>
       <div id="three">Three</div>
    </div>
  </body>
 </html>

CSS:

 #one{
     background-color: #f1f1f1;
     position: absolute;
     left:105px;
     top:155px;
     z-index: 0;
 }
 #two{
     background-color: #c9c9c9;
     position: absolute;
     left:100px;
     top:145px;
     z-index: 1;
 }
 #three{
       background-color: #888888;
       color: #f1f1f1;
       position: absolute;
       left:95px;
       top:135px;
       z-index: 2;
 }

In Action: http://www.webdevout.net/test?02C

回复收藏 0 原文