Home/ Questions/Q 8742475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T11:30:28+00:00

I have a div with some content positioned over a canvas. The div’s content

  • 0

I have a div with some content positioned over a canvas. The div’s content is longer than the height of the div, so I set the style to have overflow:auto. Problem is, the canvas seems to hog up all mouse input, and I can’t scroll the div.

Here is some sample code demonstrating my problem:

<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>

Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The div is displayed above your canvas just because you have written it after the canvas tag. To make the scroll bars work keep the z-index of div more than the canvas.

    As you have z-index : 1 for the canvas , z-index : 2 will also work for div

    If you add more tags, tags always pile up so to make them work perfectly use z-index property

    • 0