0

キャンバス上に配置されたコンテンツを含む div があります。div のコンテンツが div の高さよりも長いため、スタイルを overflow:auto に設定しました。問題は、キャンバスがすべてのマウス入力を占有しているように見え、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>someone@example.com</p>
    <h2>Phone</h2>
    <p>867-5309</p>
    <h2>Fax</h2>
    <p>867-5309</p>

</div>

</body>



</html>

助言がありますか？

4

2 に答える 2

2

DIV には、CANVAS よりも高い z-index を設定する必要があります。z-index:2 をお勧めします! :)

于 2012-10-25T17:21:35.060 に答える
1

divは、canvasタグの後に書き込んだという理由だけで、キャンバスの上に表示されます。スクロールバーを機能させるには、divのz-indexをキャンバスよりも大きくします。

キャンバスのz-index：1があるので、z-index：2はdivでも機能します

タグをさらに追加すると、タグは常に積み重なるため、完全に機能させるにはz-indexプロパティを使用します

于 2012-10-29T12:09:35.120 に答える