溢出：html5畫布上的自動div

我有一個div，內容位於畫布上。 div的內容比div的高度要長，所以我將style設置爲overflow：auto。問題是，畫布似乎佔據了所有鼠標輸入，並且我無法滾動div。溢出：html5畫布上的自動div

下面是一些示例代碼演示我的問題：

<html> 

<head></head> 

<body> 
<canvas width="1024" height="768" id = "canvas_1" style="position: absolute; z-index: 1;border:3px solid black;"></canvas> 


<div style="position:absolute; width:1024px;height:668px;position:absolute;border:1px solid red;overflow:auto;"> 
<h1>About us</h1> 

    <h2>What We Do</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat eros id est volutpat feugiat. Etiam aliquam varius malesuada. Nam condimentum erat justo. Donec id nisl in ligula ullamcorper vehicula id in neque. Suspendisse gravida, diam sit amet egestas tincidunt, dolor enim molestie elit, in ultrices tortor tellus ac risus </p> 
    <h2>Who We Are</h2> 
    <p> Sed non nisi nisi. Ut leo elit, aliquam ac dignissim lacinia, ultrices sit amet dolor. Nunc elementum sagittis dolor vitae lacinia. Nam tristique libero ut nisi euismod cursus ac non justo. Cras id sem sem. </p> 
    <h2>Something Else</h2> 
    <p> Curabitur lacinia dapibus consectetur. Praesent ligula lectus, vestibulum quis ullamcorper non, fringilla in justo. Vivamus ac orci felis. </p> 

<h1>Contact us</h1> 
    <h2>Email</h2> 
    <p>[email protected]</p> 
    <h2>Phone</h2> 
    <p>867-5309</p> 
    <h2>Fax</h2> 
    <p>867-5309</p> 

</div> 

</body> 



</html>

有什麼建議？

來源

2012-10-25 bmsauer

有沒有理由你有'位置：絕對;'內聯兩次div？ – Rchristiani

只是一個錯字，不應該在那裏。 – bmsauer

div顯示在畫布上方，因爲您已將它寫在畫布標記之後。爲了使滾動條工作，div的Z索引比畫布更多。

當你有Z-指數：1在畫布上，z-index的：2還將爲DIV

工作，如果你添加更多標籤，標籤總是積攢的太多，使他們工作完全使用z-index的屬性

來源

2012-10-29 12:09:35 user1079065

您需要爲DIV設置比CANVAS更高的z-index。我建議z-index：2！ :)

來源

2012-10-25 17:21:35 skybondsor

溢出：html5畫布上的自動div

回答

相關問題