在img的頂部顯示div

我有一個相對簡單的HTML佈局，div的意思是顯示在img的頂部。在img的頂部顯示div

但實際情況是，div顯示在圖像下方。你知道我怎樣才能得到ID爲'main'的div在id'mainImg'的img頂部顯示（但div也需要/保持居中）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>Kamalei - Home Page</title> 
    <style type="text/css"> 
    <!-- 
     html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; } 

     #mainImg { z-index: -1; } 
     #main  { text-align: center; width: 1000px; height: 700px; top: 0px; } 
     #navBar { float: left; width: 200px; height: 700px; /*margin-left: 10%; margin-top: 20%; padding: 30px; width: 20%;*/ } 
     #content { float: left; width: 800px; height: 700px; /*margin-right: 10%; margin-top: 20%; padding: 30px; width: 80%;*/ } 
    --> 
    </style> 

</head> 

<body> 

    <div id="heading"> 
     <img src="images/heading.png" alt="" width="100%" height="300px"/> 
    </div> 

    <img id="mainImg" src="images/mainBackground.png" alt="" width="100%" height="100%"/> 

    <!-- the below div is meant to be displayed over the top of the above image but it actually get display below it --> 
    <div id="main"> 
     <div id="navBar"> 
      <img src="images/navBackground.png" alt="" width="100%" height="700px"/> 
     </div> 

     <div id="content"> 
      <img src="images/contentBackground.png" alt="" width="100%" height="700px"/> 
     </div> 
    </div> 

</body> 
<!-- InstanceEnd --> 
</html>

來源

2011-06-03 Mack

必須使用CSS屬性position: absolute您的DIV，然後用股利的利潤篡改正確定位。

來源

2011-06-03 05:48:22

而不是將圖像作爲內聯標籤引用，請嘗試設置內容div本身的CSS背景屬性。這樣的事情應該做的伎倆：

#main { 
background-image:url('images/mainBackground.png'); 
background-repeat:no-repeat; 
}

來源

2011-06-03 05:55:29

而不是使用img標籤爲您的網站的背景，我會強烈建議應用背景圖像風格的股利或你的身體標記。這樣你可以保持一個漂浮的佈局&內容將出現在圖像上方，因爲你的#main div可以嵌套在元素中並且應用了背景圖像。

因此，例如CSS將是：

body { background:url('images/mainBackground.png'); }

，只是從您的標記

刪除IMG（#mainImg）標籤，你可能還需要爲您導航

來源

2011-06-03 05:57:40

什麼時候圖像沒有調整大小以適合不同大小的屏幕，CSS – Mack 2011-06-03 06:12:18

的主要限制因此，您希望此圖像根據用戶的屏幕大小進行調整大小？您可以隨時使用媒體查詢，您可以使用這些查詢來更改使用的圖像，具體取決於用戶的分辨率 – 2011-06-03 06:15:52

這裏是關於媒體查詢的文章：http://css-tricks.com/css-media-queries/使用瀏覽器根據用戶的窗口大小調整圖像大小可能會使圖像非常像素化 – 2011-06-03 06:19:37

嘗試做到這一點這個：

#mainImg { 
    left: 100px;/*adjust accordingly*/ 
    position: relative; 
    top: 100px;/*adjust accordingly*/ 
    z-index: 2; 
}

z-index用於分層html元素。

來源

2011-06-03 05:59:45 Hemchandra

在img的頂部顯示div

回答

相關問題