1

Twitter/Facebook のようなヘッダー、固定ヘッダー、およびメイン コンテンツがあります。最後の行までスクロールすると、コンテンツ div がヘッダーと重なっています。どうすればこれを回避できますか?

これは私のページのスクリーンショットです: ここに画像の説明を入力

これは私のhtmlの構造です:

<body>

<div>
<?php include("initcontrols/header.php"); echo $plHeader;?>   
</div>


<div id="mainform">
<noscript>It seems your browser doesn't support Javascript.<br /></noscript>

<!-- Apply blue theme as default for all tiles -->
<div id="tiles" class="blue">
<!-- Sliding Tile that shows 100% of the back tile every 3 seconds -->
<div class="live-tile" data-stops="100%" data-speed="750" data-delay="3000">
    <span class="tile-title">slide tile (figure 2a)</span>
    <div><img src="images/say.jpg" width="180" height="180" alt="1" /></div>
    <div><img src="images/sayako.jpg" width="180" height="180" alt="2" /></div>
</div>

    <!-- Red Flip Tile that flips every 4 seconds -->
<div class="red live-tile" data-mode="flip" data-delay="4000">
    <div>
        <img src="images/home.png" alt="3" />
        <a class="tile-title">flip tile front (figure 2b)</a>
    </div>
    <div>
        <img src="images/message.png" alt="4" />
        <a class="tile-title">flip tile back (figure 2b)</a>
        </div>
</div>


<script type="text/javascript">
// apply regular slide universally unless .exclude class is applied 
// NOTE: The default options for each liveTile are being pulled from the 'data-' attributes
$(".live-tile, .flip-list").not(".exclude").liveTile();
</script>

</div>

私のCSS：

div#header{
padding-left:15px;
overflow:hidden;
position: fixed;
margin:0px;
top:0px;
left:0px;
display: block;
width: 100%;
height: 90px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #736F6E, #111111) repeat scroll 0 0 transparent;
}
div#header-title{
color: #FFF;
float: left;
display:inline-block;
}
div#header h2{
margin: 0 0 0 3px;
z-index:12;
}
div#header h1{
margin-top:0;
margin-bottom:0;
}

#mainform{
width:960px;
background: #F0F0F0;
border: 1px solid #CCC;
height: 2000px;
margin: 100px auto;

}

ライブ タイルの外観: http://pastebin.com/cpBXYVRu http://www.drewgreenwell.com/projects/metrojs#applicationBarの テンプレートを使用しました。

4

2 に答える 2

6

要素の z-index を調整して、別の要素の背後に配置できます。この場合、固定ヘッダーの z-index を増やしたいと思うでしょう。z-index の詳細については、こちらとこちらをご覧ください。

于 2012-12-10T16:35:32.560 に答える
0

コンテンツがヘッダーの後ろに隠れるようにする画像があると思います。文字の画像のようにはっきりと見ることができ、その位置は絶対です。それを見つけてz-indexを確認し、コンテンツのz-indexをそれよりも小さくして、その背後に残るようにします

于 2014-12-20T16:21:39.280 に答える