獲取畫布元素來覆蓋我的標題/導航

我試圖讓我的畫布覆蓋我的標題和導航面板，但它只是堆疊在頂部，即使它有更大的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元素的絕對定位：

enter image description here

來源

2013-04-04 Batman

我創建了一個jsfiddle：http://jsfiddle.net/LfXME/，但仍然不明確問題是什麼。你能詳細解釋一下嗎？ – mwcz 2013-04-04 21:30:02

謝謝你:) – Batman 2013-04-04 21:31:26

@mwcz對不起，如果我不夠詳細。我需要畫布來覆蓋標題和導航。所以現在它的尺寸與兩者相同，但我需要將它放在徽標和導航上。當我向它添加絕對位置時，它會按照我的要求進行，但不能正確對齊。 – Batman 2013-04-04 21:37:04

您可以設置

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

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

在您的例子，它沒有正確對齊，因爲#topWrapper有text-align: center;財產，並迫使#canvas從中心開始。

來源

2013-04-04 21:49:20

是的，工作。謝謝。我之前使用margin-left：-425px解決了這個問題，但是這個解決方案看起來真的很難看。我更喜歡這個。 – Batman 2013-04-04 21:54:06

工作根據你的代碼：http://jsfiddle.net/PZU9F/

這將解決你的問題，只要你根據你的代碼解釋。

如果您提供更多詳細信息，可以優化解決方案並提高效率。

#canvas{ 
    margin-bottom: -129px; 
    background: green; 
}

來源

2013-04-04 21:40:30 Arbel

獲取畫布元素來覆蓋我的標題/導航

回答

相關問題