使用z-index在其他元素前面创建一个嵌套元素?

时间:2011-02-28 15:39:15

标签: html css

我的代码如下所示:

css:

.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
z-index: -100;

}

.bar {
position: relative;
z-index: -200;
width: 100%
height: 100px;

}

.inner-bar {
position: relative;
z-index: 100;
width: 100%
height: 50px;

}



html:

<body>
<div class="top">some content</div>

<div class="bar"> 
  <div class="inner-bar">some content</div>
<div>

</body>

正如你所看到的那样,我试图让内栏出现在前面,但这不起作用。一旦我将bar设置为落后于所有东西(其工作),这也将内部条设置为所有内容的后面,无论我为内部条做什么样式。我的布局要求内部栏必须是酒吧的孩子。那么有解决方案吗?它是什么?

为了说清楚我的目标是让栏位于顶部(顶部的内容出现在栏上)并在顶栏后面做顶部(顶部的内容如果与内栏重叠则隐藏,以便内部的链接 - 酒吧很活跃。)

2 个答案:

答案 0 :(得分:0)

负z-index值具有奇怪的行为。我不相信它们像你期望的那样在“层”中工作,而是它们都在同一个“层”上。请尝试使用正z-index值:

.top {
  position: absolute;
  top:0;
  left:0;
  height: 1600px;
  width: 100%;
  z-index: 1;    
}

.bar {
  position: relative;
  z-index: 2;
  width: 100%
  height: 100px;
}

.inner-bar {
  position: relative;
  z-index: 3;
  width: 100%
  height: 50px;
}

答案 1 :(得分:0)

首先关闭你发布的html中的错误:

<body>
    <div class="top">some content</div>
    <div class="bar"> 
      <div class="inner-bar">some content</div>
    </div>
</body>

你没有关闭最后一个div:)

至于其他人:

先生,你先生好! http://jsfiddle.net/8AJnD/31/

.top {
    position: absolute;
    top:0;
    left:0;
    height: 1600px;
    width: 100%;
    top:0;left:0;z-index:0;
}

.bar {
    position: absolute;z-index:-1;
    width: 100%;
    height: 100px;top:0;left:0
}

.inner-bar {
    position: absolute;
    z-index:-2;
    width: 100%
    height: 50px;top:0;left:0
}

使用绝对值而不是相对值,并使父对象能够定位元素,无论您希望它们如何定位