圖像泄漏從格

在我的網站我有一些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

來源

2015-04-16 APRULE

一個的jsfiddle會有所幫助。 –

main_pics div沒有關閉.. – pcs

你的'main'高度爲100％覆蓋了500px的'.container'高度，所以這就是爲什麼你要覆蓋主div下面的文本（我猜你沒有' t爲主體的父母設置任何高度樣式，因此100％的任何東西都不會爲零，導致絕對定位的元素「泄漏」）。正如你所說的你的頭文件是固定的，IO'm猜測這將在主容器下，因爲你沒有設置任何z-index。但沒有更多的代碼來創建[MCVE]（http://stackoverflow.com/help/mcve），這是純粹的猜測工作 – Pete

試試這個JSFIDDLE作爲一個例子。您需要爲固定標題指定一個高度，併爲其指定屬性top:0以使其固定在頂部。這也將從您的頁面流中移除固定元素，因此您必須將您的照片div放在頂部邊緣以將其放置在標題下方。由於您沒有提供所需的信息，因此我無法確定照片後的文字。

編輯

查看您近期的評論後，你應該改變main_pics這樣：

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

，並添加z-index:2;到#nav_bar

來源

2015-04-16 14:23:42 Kinburn101

謝謝！這是工作。 – APRULE

圖像泄漏從格

回答

相關問題