Изображение утечка из div

Question

У меня в Интернете у меня есть divs. Первый и верхний - это моя панель меню, а ниже - одна, у меня есть еще div. Второй div содержит изменение фотографии и ниже него div с некоторым текстом. Когда я запускаю свой код, фотографии (которые находятся во втором div) покрывают все divs (хотя положение в строке меню «фиксировано»). Я думаю, что проблема находится где-то в файле css. Кто-нибудь может мне помочь?

Вот мой код:

<div id="header"> 
    <div id="nav_bar"> 
     <ul> 
      <li><a href="#">בית</a></li> 
      <li><a href="#">אודות</a></li> 
      <li><a href="#">עבודות</a></li> 
      <li><a href="#">פרוייקטים</a></li> 
      <li><a href="#">חיפויי קירות</a></li> 
      <li><a href="#">צרו קשר</a></li> 
     </ul> 
    </div> 
</div> 

<div id="main_pics" class="container"> 
<!-- photos here --> 
<div id="main_photo1" class="phocont first"> 
    <p>1</p> 
</div> 
<div id="main_photo2" class="phocont"> 
    <p>2</p> 
</div> 
<div id="main_photo3" class="phocont"> 
    <p>3</p> 
</div> 
<div id="main_photo4" class="phocont"> 
    <p>4</p> 
</div> 
<div id="main_photo5" class="phocont"> 
    <p>5</p> 
</div> 

вот мой CSS код:

#main_pics { 
width: 100%; 
height: 100%; 
position:relative; 
} 

.phocont { 
width: 100%; 
height: 100%; 
position:absolute; 
top:0; 
left:0; 
text-align:center; 
} 
.phocont p { 
margin-top:30%; 
font-size:60pt; 
color:#fff; 
text-shadow: 0 0 2px #000; 
} 
.first { 
z-index:9999; 
} 
#image{ 
overflow: hidden; 
background-size: cover; 
background-position: center; 
} 

#main_photo1{ 
width: 100%; 
height: 100%; 
background-image: url("1.jpg"); 
background-position: center center; 
background-size: cover; 
} 

#main_photo2{ 
width: 100%; 
height: 500px; 
background-image: url("2.jpg"); 
background-position: center center; 
background-size: cover; 
} 

#main_photo3{ 
width: 100%; 
height: 500px; 
background-image: url("3.jpg"); 
background-position: center center; 
background-size: cover; 
} 

.container{ 
width: 100%; 
height: 500px; 
background-color: white; 
} 

jsFIDDLE

Answer 1

Попробуйте JSFIDDLE в качестве примера. Вам нужно указать высоту для вашего фиксированного заголовка и присвоить ей свойство top:0, чтобы оно было исправлено вверху. это также удалит фиксированный элемент из потока вашей страницы, поэтому вам нужно будет дать вашему фото div верхний край, чтобы разместить его под заголовком. Я не уверен в тексте, который у вас есть после фотографий, поскольку вы не предоставили необходимую информацию.

EDIT

После рассмотрения Вашего последнего комментария вы должны изменить main_pics к этому:

#main_pics { 
width: 100%; 
height: 500px; 
position:relative; 
margin-top:55px; 
z-index:1; 
} 

, а также добавить в z-index:2;#nav_bar