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 显示在画布上方只是因为您在画布标签之后编写了它。要使滚动条正常工作，请保持 div 的 z-index 大于画布。

因为你有 z-index : 1 的 canvas ， z-index : 2 也适用于 div

如果您添加更多标签，标签总是会堆积起来，以便使用 z-index 属性使它们完美工作

于 2012-10-29T12:09:35.120 回答