0

我试图让我的画布覆盖我的标题和导航面板，但它只是堆叠在顶部，即使它有更大的 Z-index。我是否使用绝对位置，它会覆盖我想要的元素，但它没有正确对齐。画布可能会在我不明白的中间点开始。它不应该从 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 回答
1

你可以设置

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

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

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

于 2013-04-04T21:49:20.350 回答