如何解决z-index问题？

Question

I have a fixed navigation bar and a paragraph of text. 我有一个固定的导航栏和一段文字。 On scroll, I want the paragraph's text to appear behind the navigation bar. 在滚动时，我希望段落的文本出现在导航栏的后面。 I am currently using z-index, but it is not working. 我目前正在使用z-index，但无法正常工作。 May someone help guide me in the right direction please? 有人可以帮我指引正确的方向吗？ Here is the complete code so far. 这是到目前为止的完整代码。 Thank you. 谢谢。 Here is the link to the codepen: https://codepen.io/kylelong/pen/oaBLGd 这是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]

Answer 1

The issue seems to be that your nav bar is transparent. 问题似乎是您的导航栏是透明的。 If you set the background-color property to a solid (black), you can see that your z-index CSS selector is indeed working (you could also set the z-index back to 1 instead of 1000 :) ). 如果将background-color属性设置为纯色（黑色），则可以看到您的z-index CSS选择器确实有效（您也可以将z-index设置回1而不是1000 ：））。

如何解决z-index问题？

问题描述

1 个解决方案

解决方案1
4 2018-10-08 22:27:01

如何解决z-index问题？

问题描述

1 个解决方案

解决方案1 4 2018-10-08 22:27:01

解决方案1
4 2018-10-08 22:27:01