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

2019-04-12 01:00发布

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.

2条回答
手持菜刀,她持情操
2楼-- · 2019-04-12 01:12

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

查看更多
小情绪 Triste *
3楼-- · 2019-04-12 01:13

'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.

查看更多
登录 后发表回答