Question

您好我有以下HTML代码

<body>
    <div class="relative1"> 
        <div class="fixed1"> </div> 
    </div>
    <div class="relative2"> </div> 
</body>

和CSS

.relative1 {
  left: 0px;
  top: 0px;
  width: 100px; 
  height: 100px;
  background-color: red; 
  position: relative; 
  z-index: 1; 
}

.fixed1 {
  width: 100px; 
  height: 100px;
  left: 20px;
  top: 20px;
  background-color: green; 
  position: fixed; 
  z-index: 2; 
}

.relative2 {
  width: 100px; 
  height: 100px;
  left: 30px;
  top: -80px;
  background-color: blue; 
  position: relative; 
  z-index: 1; 
}

示例：FIDDLE

您可以看到div.relative2涵盖了我的div.fixed1什么不是我想要的。我需要用div.fixed1覆盖所有内容。如果不更改.relative1和.relative2 css的css，有没有办法做到这一点？

Answer 1

不要将固定div嵌套在相对div中：

http://jsfiddle.net/WGcRe/1/

<body>
    <div class="relative1"> 
    </div>
    <div class="fixed1"> </div>     
    <div class="relative2"> </div> 
</body>

固定元素与相对定位的元素无关;他们坚持在屏幕上因此，我没有理由将它们嵌套。

Answer 2

设置

.relative2{
z-index: -1;
}

相对div覆盖具有较高z-index的固定div

2 个答案: