Question

我有一个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>

有什么建议吗？

Answer 1

您需要为DIV设置比CANVAS更高的z-index。我建议z-index：2！：）

Answer 2

div显示在画布上方，因为你已经在canvas标签之后写了它。要使滚动条工作，请保持div的z-index比画布更多。

当你有z-index：1作为画布时，z-index：2也适用于div

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

溢出：html5画布上的自动div

2 个答案: