Question

我在顶部修了一个div，在它下面有一个div内容。

当我滚动页面时，我希望div content超过div top，我将z-index放在div内容中但没有任何反应......

#top{
  top:0;
  width:100%;
  height:100px;
  position:fixed;
  border:1px solid #000;
  background:black;
}

#content{
  background:red;
  margin-top:120px;
  height:5000px;
  z-index:300000;
}

HTML

<div id=top></div>
<div id=content></div>

我需要修复div top和内容相对。

有什么不对？ https://jsfiddle.net/y97o6kaL/

Answer 1

将z-index: -1;提供给#top将适合您。

#top{
  top:0;
  width:100%;
  height:100px;
  position:fixed;
  border:1px solid #000;
  background:black;
  z-index: -1;
}

<强> Working Fiddle

Answer 2

我会将position: relative;添加到#content div。

这将消除对任何z-index样式的需求。

＆＃13;

#top{
  top:0;
  width:100%;
  height:100px;
  position:fixed;
  border:1px solid #000;
  background:black;
}

#content{
  background:red;
  margin-top:120px;
  height:5000px;
  position: relative;
}

＆＃13;

<div id=top></div>

<div id=content></div>

＆＃13;

div上的div内容固定在滚动上？

2 个答案: