I'm in the process of creating a website template with Adobe Dreamweaver CS6 in HTML and CSS, and I have created a header with the position:fixed; declaration, but when I view the code live, my dummy text shows over the top of the image for some reason. Is this a common problem in HTML? Is there a fix for this?

My code sections

My HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>DC Personal Training</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

<link href="../CSS/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header">
<!-- end .header --><img src="../Images/header.png" width="1567" height="177" alt="Dan Christopherson Personal Training" /></div>
<div class="container">

  <div class="content">
    <h1><!-- TemplateBeginEditable name="Heading" -->Heading<!-- TemplateEndEditable --></h1>
    <!-- TemplateBeginEditable name="Content" -->Just some
    <!-- end .content -->
    dummy text.<!-- TemplateEndEditable --></div>
  <div class="footer">
    Copyright Dan Christopherson Personal Training, 2013. All rights reserved. Website by Xtreme Web Design.
  <!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

My CSS:

@charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #000000;
    margin: 0;
    padding: 0;
    color: #FFF;
}


ul, ol, dl {
    padding: 0;
    margin: 0;
}
p {
    margin-top: 0;
    padding-right: 15px;
    padding-left: 15px;
    border: none;
}



a:link {
    color: #42413C;
    text-decoration: underline;
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    text-decoration: none;
}


.container {
    width: 960px;
    background-color: #000000;
    margin: 0 auto; 
}


.header {
    background-color: ;
    position: fixed;
    top: 0;
    vertical-align: top;
}

.sidebar1 {
    float: left;
    width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    width: 950px;
    float: left;
}
.sidebar2 {
    float: left;
    width: 180px;
    background-color: #EADCAE;
    padding: 10px 0;
}


.content ul, .content ol { 
    padding: 0 15px 15px 40px;
}


ul.nav {
    list-style: none;
    border-top: 1px solid #666;
    margin-bottom: 15px; 
}
ul.nav li {
    border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
    padding: 5px 5px 5px 15px;
    display: block;
    width: 160px;
    text-decoration: none;
    background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
    background-color: #ADB96E;
    color: #FFF;
}


.footer {
    padding: 10px 0;
    background-color: #000000;
    position: relative;
    clear: both;
    color: #8cc638;
}


.fltrt {
    float: right;
    margin-left: 8px;
}
.fltlft {
    float: left;
    margin-right: 8px;
}
.clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

Thanks in advance.

Jake Zeitz

Add z-index: 100; after position: fixed; in your css rule for your header element.

'z-index' must be used in combination with 'position'. 'position' alone will work, it will set the position of the corresponding div or whatever element. By default everything are in the same layer (the same z-index), to put some element in top (or beneath) another, define another number, minus, 0 (zero), or positive integer.

来源：https://stackoverflow.com/questions/15418808/how-can-i-bring-an-image-in-front-of-text-html

标签

html

css

dreamweaver

How can I bring an image in front of text HTML?

My code sections

My HTML:

My CSS: