У меня есть фиксированная панель навигации и абзац текста.При прокрутке я хочу, чтобы текст абзаца появлялся за панелью навигации.В настоящее время я использую z-index, но он не работает.Может кто-нибудь помочь направить меня в правильном направлении, пожалуйста?Вот полный код на данный момент.Спасибо.Вот ссылка на кодовый блок: 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]