防止元素落后于固定div

Question

考虑以下示例

HTML

<div class="top">
    Hello
    <div>
        <a href="content">Click Here</a>
        <div id="content">Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here
        </div>

CSS

.top{
     position: fixed;
}  

#content{
     margin-top: 100px;
}

当点击链接点击这里时，课程content的内容落后于top课程，有什么办法可以阻止这个吗？就像id content的内容应该始终在类top之后显示这可以使用CSS或jQuery实现吗？

Answer 1

这是z-index css属性。仅当元素position不是静态时才会生效：fixed，relative或absolute：

.top a {
  z-index: 10;
  position: absolute;
  left: 20px;
  top: 10px;
  background-color: #ddd;
}
#content {
  border: 1px solid #898989;
  padding-top: 30px;
}

<div class="top">
  Hello
  <div>
    <a href="content">Click Here</a>
    <div id="content">
      Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here Content Here
    </div>
  </div>
</div>