Displaying a div over the top of an img_问答_开发者

开发者 https://www.devze.com 2023-03-09 23:20 出处：网络

I have a relatively simple HTML layout where a div is meant to be displayed over the top of an img. But what actually happens is that the div gets displayed below the image. Do you know how I can get

相关专题：css javascript

I have a relatively simple HTML layout where a div is meant to be displayed over the top of an img.

But what actually happens is that the div gets displayed below the image. Do you know how I can get the div with the id 'main' to be displayed over the top of the img with the id 'mainImg' (but the div also needs to be/remain centred).

    <!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>

Instead of using an img tag for your site's background I would strongly suggest applying a background image style to a div or your body tag. That way you can keep a floated layout & the contents will appear above the image since your #main div can be nested inside the element with the backgrund image applied.

so for example css would be:

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

and just remove the img (#mainImg) tag from your markup

you may also want to do this for your navigation

you must use the css property position: absolute for your div and then tamper with margins of the div to position it properly.

Instead of referencing the image as an inline tag, try setting the CSS background properties of the content div itself. Something like this should do the trick:

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

try this:

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

z-index is for layering html elements.

Displaying a div over the top of an img

精彩评论

关注公众号

热门标签

图文推荐

Displaying a div over the top of an img

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：