html - 让 Canvas 元素覆盖我的标题/导航

Question

我试图让我的 Canvas 覆盖我的页眉和导航面板，但它只是堆叠在顶部，即使它有更大的 Z-index。如果我使用绝对位置，它会遍历我想要的元素，但它没有正确对齐。 Canvas 可能会在我不明白的中间点开始。它不应该继承 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;
}

我尝试在 canvas 元素上使用绝对定位，它会按照我的需要自行放置，但对齐不起作用:

Answer 1

可以设置

#canvas{
    position: absoulute;
    left: 0;
    background: green;
}

http://jsfiddle.net/LfXME/2/

在您的示例中，它没有正确对齐，因为 #topWrapper 具有 text-align: center; 属性，并且强制 #canvas从中心开始。