3

我正在使用 HTML 和 CSS 中的 Adob​​e Dreamweaver CS6 创建网站模板，并且我创建了一个带有position:fixed;声明的标题，但是当我实时查看代码时，我的虚拟文本显示在图像顶部原因。这是 HTML 中的常见问题吗？有解决办法吗？

我的代码部分

我的 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>

我的 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;
}

提前致谢。

4

2 回答 2

5

在您的标题元素的 css 规则中添加z-index: 100;after 。position: fixed;

于 2013-03-14T19:51:09.803 回答
1

“z-index”必须与“位置”结合使用。'position' 单独工作，它将设置相应 div 或任何元素的位置。默认情况下，所有内容都在同一层（相同的 z-index），要将某些元素放在另一个元素的顶部（或下方），请定义另一个数字、减号、0（零）或正整数。

于 2013-03-14T19:55:17.603 回答