Fatal编程技术网
  • html/
  • Html 如何解决z索引问题？

Html 如何解决z索引问题？

html css responsive-design

Html 如何解决z索引问题？,html,css,responsive-design,Html,Css,Responsive Design,我有一个固定的导航栏和一段文字。滚动时，我希望段落文本显示在导航栏后面。我目前正在使用z-index，但它不起作用。请有人帮我指引正确的方向好吗？下面是到目前为止的完整代码。非常感谢。以下是代码笔的链接： [ 标题 /*导航菜单*/ .导航栏 { 位置：固定； 排名：0； 左：0； 高度：45px； 宽度：100%； z指数：1000； -网络工具包盒阴影：0px 2px 3px 0px rgba（0,0,0,0.2）； -moz盒阴影：0px2px3px0pxrgba（0,0,0,0.2）；

我有一个固定的导航栏和一段文字。滚动时，我希望段落文本显示在导航栏后面。我目前正在使用z-index，但它不起作用。请有人帮我指引正确的方向好吗？下面是到目前为止的完整代码。非常感谢。以下是代码笔的链接：

[
标题
/*导航菜单*/
.导航栏
{
位置：固定；
排名：0；
左：0；
高度：45px；
宽度：100%；
z指数：1000；
-网络工具包盒阴影：0px 2px 3px 0px rgba（0,0,0,0.2）；
-moz盒阴影：0px2px3px0pxrgba（0,0,0,0.2）；
盒影：0px 2px 3px 0px rgba（0,0,0,0.2）；
/*边框底部：2个实心#4169E1*/
}
#正文{
位置：相对位置；
宽度：300px；
左：0px；
顶部：0px；
z指数：-1；
}


同花紫罗兰（Lorem ipsum dolor sit amet，Concertetur Adipise Elite）、紫罗兰（Mauris rutrum eleifend sapien ut egestas）、紫罗兰（Nam Consequeat varius pretium）、紫罗兰（Sed porttitor ultricies turpis）和苏打水（Phasellus concertetur lacus et Vehicle sodales）、紫罗兰（Mauris lacinia iaculis）、紫罗兰（Sed molestie orci Elite）等，在威尼斯人的调味品中在自然状态下，婴儿和大熊猫会产褥，而大熊猫则会坐在马蒂斯猫的身上，坐在狮子座的头上。前庭会变小，会变小，会变小。这是一个很好的缺陷。这是一个很好的缺陷。这是一个很好的缺陷，一个很好的缺陷，一个很好的缺陷，在秃鹫之地，它是一种邪恶的力量。
生活的乐趣在于，你可以坐在你的饮食中。我的名字叫勒勒姆·夸姆，在弗林利亚a的节拍，我的生命之前。我的名字叫佩伦特斯，我的名字叫佩伦特斯·沃里帕特·珀鲁斯·内克，我的名字叫索利西图丁·厄罗斯。我的名字叫唐纳·朗卡斯，我的名字叫马格纳·艾尔奎姆，我的名字叫韦利特·廷西德，我的名字叫佩伦特斯·佩伦特斯，我的名字叫佩伦特斯·瓦里帕特在前庭的两个房间里，不规则的舌苔、不规则的舌苔、不规则的舌苔、不规则的舌苔、不规则的舌苔、不规则的舌苔、不规则的舌苔、不规则的舌苔、不规则的舌苔、不规则的舌苔、不规则的矢状舌苔、不规则的舌苔、不规则的舌苔这是一种很有潜力的植物，它是一种很有潜力的植物，它是一种很有生命力的植物，它是一种很有生命力的植物。
Morbi lobortis sodales nunc，ut maximus neque pharetra ac.Suspendisse gravida lorem nisi，以说明妊娠水平。Mauris venenatis risus non mi consequement element。Pellentesque eu ornare ligula。nunc eleifend turpis et viverra aliquam。Suspendisse ligula ligula，Iculis vel egestas et，Ventas Ventas，vehicula ut arcu。Morbi lectus neque，varius eu feugi在vitae，luctus eget neque.Phasellus convallis commodo lacus quis accumsan.前庭和前庭设施。Duis eleifend mauris a nisi a concertive tetur et ac purus.Donec sollicitud vulpute neque，non ullamcorper urna vulpute non。
在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中，在大前庭中前庭中，在大前庭中，在大前庭中，在大前庭中前庭中，在大前庭中前庭中这是一位杰出的人物。他是一位杰出的艺术家。他是一位杰出的艺术家。他是一位杰出的艺术家。他是一位杰出的艺术家。他是一位杰出的艺术家。他是一位杰出的艺术家。他是一位杰出的艺术家，前庭面部凹陷性按摩器。
我们的产品有两种，一种是玉米卷，一种是玉米卷，一种是苏打水，一种是玉米卷，一种是玉米卷，一种是玉米卷，一种是玉米卷，一种是玉米卷，一种是玉米卷，一种是玉米卷，一种是玉米卷，另一种是玉米卷，一种是玉米卷在《圣经》中，他是一位伟大的诗人。在《圣经》中，他是一位伟大的诗人。在《圣经》中，他是一位伟大的诗人。在《圣经》中，他是一位伟大的诗人。


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

下面用代码回答：谢谢。我只需要添加背景色：白色； 
[<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]