3

HTML と CSS で Adob​​e Dreamweaver CS6 を使用して Web サイト テンプレートを作成している最中で、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

z-index: 100;ヘッダー要素のcssルールの後に追加position: fixed;します。

于 2013-03-14T19:51:09.803 に答える
1

「z-index」は「position」と組み合わせて使用​​する必要があります。「位置」だけで機能し、対応する div またはその他の要素の位置を設定します。デフォルトでは、すべてが同じレイヤー (同じ z インデックス) にあり、要素を別の上 (または下) に配置するには、別の数値、マイナス、0 (ゼロ)、または正の整数を定義します。

于 2013-03-14T19:55:17.603 に答える