我试图让我的画布覆盖我的标题和导航面板,但它只是堆叠在顶部,即使它有更大的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;
}
我尝试在canvas元素上使用Absolute定位,它将自己置于我需要的位置但是对齐不起作用:
答案 0 :(得分:1)
根据您的代码工作小提琴: http://jsfiddle.net/PZU9F/
根据您的代码,这将解决您的问题。
如果您提供更多详细信息,则可以优化解决方案并提高效率。
#canvas{
margin-bottom: -129px;
background: green;
}
答案 1 :(得分:1)
您可以设置
#canvas{
position: absoulute;
left: 0;
background: green;
}
在您的示例中,它未正确对齐,因为#topWrapper
具有text-align: center;
属性,并且强制#canvas
从中心开始。