0

キャンバスでヘッダーとナビゲーション パネルをカバーしようとしていますが、Z インデックスが大きいにもかかわらず、キャンバスが上に積み重なっています。絶対位置を使用していますか?必要な要素を超えていますが、適切に整列していません。キャンバスは、私には理解できない中間点から始まるかもしれません。topWrapper ルールからポジショニング/アライメントを継承すべきではありませんか?

HTML

<div id="topWrapper">
    <canvas id="canvas" width="850px" height="194px"></canvas>
    <a href="index.html">       
        <header id="top_header"></header>
    </a>    
    <nav id="topnav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="video.html">Trailers</a></li>
            <li id='adminPage'><a href="admin.html">Admin</a></li>
        </ul>
    </nav>   
</div>

CSS:

#topWrapper {
    background-color:#0d0d0d;
    text-align:center;
    position:absolute;
    z-index:9999;
    width:100%;
    max-width: 850px;
    margin: 0 auto; left:0px; right:0px;
    float:clear;
    background-image: url('images/headfoot/bg5.jpg');    
}
#top_header{
    width: auto;
    height: 120px; 
    border-bottom: 1px solid yellow;
    margin: 0px;
    padding: 2px 0px;
    cursor:pointer;
    background: url('images/banner.png') center no-repeat;
    background-size: contain;
}
#topnav{
    border-bottom: 1px solid yellow;
    width: 100%;
}
#canvas{
    background: green;
}

キャンバス要素で絶対配置を使用してみましたが、必要に応じて配置されますが、配置が機能しません。

ここに画像の説明を入力

4

2 に答える 2

1

あなたのコードに基づいて作業フィドル: http://jsfiddle.net/PZU9F/

これは、コードに基づいて説明した限り、問題を解決します。

詳細を提供すると、ソリューションが最適化され、より効率的になります。

#canvas{
    margin-bottom: -129px;
    background: green;
}
于 2013-04-04T21:40:30.947 に答える