Наложение тембров элементов в CSS

Question

У меня есть веб-сайт (который я провел несколько месяцев разработки):

body { 
 
    height: 1920px; 
 
} 
 

 
.h1 { 
 
    position: fixed; 
 
    color: #333; 
 
} 
 

 
.h2 { 
 
    position: relative; 
 
    color: red; 
 
}

<div class="1"> 
 
<h1 class="h1"> 
 
Hi 
 
</h1> 
 
</div> 
 

 
<div class="2"> 
 
<h2 class="h2"> 
 
Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. Bye. 
 
</h2> 
 
</div>

Однако, как вы можете видеть, красный текст покрывает черный текст и я Не знаю, почему. Как я могу сделать так, чтобы красный текст был ниже черного текста?

Answer 1

Вы должны добавить правило в z-index: CSS для вашего <nav> элемента:

Demo - http://jsfiddle.net/vbbh6c6x/

.nav{ 
    position:relative; 
    z-index:100; 
} 

Это изменяет порядок расположения элементов.

Убедитесь, что <nav> элемент также имеет, как CSS position: указано иначе z-index: правила не будет иметь никакого эффекта (он не должен быть в той же декларации правила, но где-то в CSS .nav должен иметь явные position:)

Answer 2

добавить к вашей CSS

.nav { z-index:2 } 

Answer 3

Это может быть z-index,

Измените код, как это.

.nav ul li:hover ul { 
display: block; 
z-index: 1; /*added for submenu*/ 
} 

Надеюсь эта помощь.!

Answer 4

Добавьте z-index в свой класс nav, это позволит перейти вниз по ползунку изображения.

.nav { 
    background-color: #222; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    position: relative; 
    z-index: 99999; /* Add this */ 
} 

Answer 5

Z-index в вашем CSS будет делать трюк, например;

.h1 { 
    z-index:100 
} 

Большинство браузеров поддерживают до 2147483647 значение для индекса z.