时间戳

首页 > 解决方案 > 如何解决 z-index 问题？

html - 如何解决 z-index 问题？

问题描述

我有一个固定的导航栏和一段文字。在滚动时，我希望段落的文本出现在导航栏的后面。我目前正在使用 z-index，但它不起作用。有人可以帮助指导我正确的方向吗？这是到目前为止的完整代码。谢谢你。这是codepen的链接：https ://codepen.io/kylelong/pen/oaBLGd

[<html>
<head>
  <title>Title</title>
  <style>
  /* Navigation menu */
  .nav-bar
  {
    position: fixed;
    top: 0;
    left: 0;
    height: 45px;
    width: 100%;
    z-index: 1000;

    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    /*border-bottom: 2px solid #4169E1;*/
  }
  #text{
    position: relative;
    width: 300px;
    left: 0px;
    top: 0px;
    z-index: -1;
  }
   </style>
</head>
<body>
  <nav class="nav-bar">  </nav>
  <p id='text'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum eleifend sapien ut egestas. Nam consequat varius pretium. Sed porttitor ultricies turpis sed convallis. Phasellus consectetur lacus et est vehicula sodales. Integer suscipit urna porttitor mauris lacinia iaculis. Sed molestie orci elit, in condimentum mi venenatis vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet mattis felis, sit amet finibus leo. Vestibulum congue dapibus neque, sed consequat sapien. Fusce id aliquet lacus. Donec feugiat lacus dolor, id bibendum quam lacinia id. Nam luctus dignissim velit, id pulvinar sapien semper at. Fusce vitae efficitur urna, in vulputate est. Fusce convallis ante quis eros cursus ultricies.

  Vivamus placerat dolor sit amet arcu malesuada imperdiet. Nam lorem quam, tempus at fringilla a, pretium vitae dolor. Pellentesque eu sem volutpat, volutpat purus nec, sollicitudin eros. Donec rhoncus, magna et interdum aliquam, ligula velit tincidunt nulla, nec pellentesque tellus nulla a odio. Donec volutpat dui et turpis tristique elementum. Aenean feugiat dui vestibulum ligula imperdiet, ac hendrerit est sollicitudin. Cras imperdiet, velit vel facilisis mattis, eros mauris varius elit, vitae luctus metus elit nec eros. Vivamus sollicitudin ultricies consequat. Ut luctus, arcu sed ultricies facilisis, libero risus sagittis mauris, vel tempor mi lorem sed lectus. Sed gravida vulputate cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris eu fermentum massa. Suspendisse potenti. Mauris feugiat ligula ut est feugiat laoreet. Vivamus eget mattis nulla. Donec sem nulla, imperdiet ut elementum in, consequat a nisl.

  Morbi lobortis sodales nunc, ut maximus neque pharetra ac. Suspendisse gravida lorem nisi, in aliquet tellus gravida vel. Mauris venenatis risus non mi consequat elementum. Pellentesque eu ornare ligula. Nunc eleifend turpis et viverra aliquam. Suspendisse ligula ligula, iaculis vel egestas et, vehicula ut arcu. Morbi lectus neque, varius eu feugiat vitae, luctus eget neque. Phasellus convallis commodo lacus quis accumsan. Vestibulum aliquam fringilla facilisis. Duis eleifend mauris a nisi consectetur dictum et ac purus. Donec sollicitudin vulputate neque, non ullamcorper urna vulputate non.

  Nulla vitae dictum dui. Cras pretium volutpat iaculis. Phasellus consequat mi non neque molestie iaculis quis eu neque. Aenean elementum sem ut massa varius, in fringilla magna vestibulum. In a leo finibus, aliquet metus et, viverra lacus. Curabitur ex neque, iaculis vel varius et, iaculis at ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt est porta, placerat ante pretium, facilisis eros. Duis viverra felis elit, sed condimentum sapien pulvinar a. Nunc dapibus eget augue in rhoncus. Suspendisse efficitur luctus ligula nec consectetur. Sed feugiat gravida nisi et congue. Donec egestas nec sapien et consectetur. Cras vitae metus sodales, varius nulla quis, molestie enim. Aliquam erat volutpat. Nunc nec lacus sed massa vestibulum facilisis.

  Ut eu posuere diam. Curabitur enim massa, aliquam at nulla nec, rhoncus consequat augue. Nunc pretium ut tortor ut sodales. Ut commodo purus velit, at imperdiet tortor finibus at. In scelerisque odio sed turpis fermentum iaculis. Integer lacinia scelerisque ex tempus sodales. Nunc velit sapien, tempus vel consectetur non, sagittis eget felis. Proin in maximus lorem. Proin eros mi, tempus eu accumsan quis, porta vel urna. Quisque vestibulum suscipit dui vel faucibus. Pellentesque non erat mattis, tempus tortor eu, posuere augue.
  </p>

</body>
</html>][1]

标签： htmlcssresponsive-design

解决方案

问题似乎是您的导航栏是透明的。如果您将该background-color属性设置为纯色（黑色），您可以看到您的 z-index CSS 选择器确实在工作（您也可以将 z-index 设置回 1 而不是 1000 :)）。

推荐阅读