Question

我有一个相对简单的HTML布局，其中div应显示在img的顶部。

但实际发生的是div显示在图像下方。你知道我怎么能得到id为'main'的div在img的顶部显示id为'mainImg'（但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>

Answer 1

我强烈建议您将背景图片样式应用于div或body标签，而不是在网站的背景中使用img标记。这样你可以保持浮动的布局＆amp;内容将显示在图像上方，因为#main div可以嵌套在元素中并且应用了背景图像。

所以例如css将是：

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

并从标记中删除img（#mainImg）标记

您可能还想为导航执行此操作

Answer 2

你必须为你的div使用css属性position: absolute，然后篡改div的边距以正确定位它。

Answer 3

不要将图像引用为内联标记，而是尝试设置内容div本身的CSS背景属性。这样的事情可以解决问题：

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

Answer 4

试试这个：

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

z-index用于分层html元素。

在img的顶部显示div

4 个答案: