오버플로 : html5 캔버스의 자동 div

캔버스 위에 배치 된 일부 내용이있는 div가 있습니다. div의 내용이 div의 높이보다 길기 때문에 스타일을 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에 두 번째로 'position : absolute;'인라인이있는 이유가 있습니까? – Rchristiani

그냥 오타가 있으면 안됩니다. – bmsauer

div는 캔버스 태그 뒤에 작성했기 때문에 캔버스 위에 표시됩니다. 스크롤 막대를 작동 시키려면 div의 Z- 색인을 캔버스보다 많이 유지하십시오. 캔버스, Z- 인덱스 1 : 당신이 Z- 인덱스를 가지고

더 많은 태그를 추가 할 경우이 또한 DIV

위해 작동, 태그는 항상 쌓아 그래서 그들을 완벽하게 Z- 인덱스를 사용하여 작동하도록 속성

출처

2012-10-29 12:09:35 user1079065

CANVAS보다 DIV에 더 높은 Z- 색인을 설정해야합니다. 나는 Z-index : 2를 제안한다. :)

출처

2012-10-25 17:21:35 skybondsor

오버플로 : html5 캔버스의 자동 div

답변

관련 문제