Positioning overlapping canvas

问题

I've got a page that is supposed to display a line graph. There is a title at the top, the graph in the middle, then a table below them. It is laid out roughly like this:

<div>
    <h1>Title</h1>
</div>
<div>
    <canvas1></canvas>
    <canvas2></canvas>
</div>
<div>
    <table></table>
</div>

Right now each of the 'div' blocks are staying separate from each other, which is good. However, the two canvas's, despite having different z-index values, are next to each other instead of stacking on top. I've read that their position values should both be set to absolute, but whenever I do this, the table immediately moves on top of the canvas.

What position and display values do I need to set to the div's and the elements inside them to get the canvasses on top of each other (both are the same dimensions) without anything else stacking on top of their div?

Edit: Here's a fiddle

回答1:

HTML:

Wrap the 2 canvases inside a wrapper div.

<div id="wrapper">
    <canvas id="canvasBottom" width=300 height=200></canvas>
    <canvas id="canvasTop" width=300 height=200></canvas>
</div>

CSS:

Position the 2 canvases at the same top & left relative to the wrapper div.

#wrapper{
    position:relative;
    width:300px;
    height:200px;
}
#canvasTop,#canvasBottom{
    position:absolute; top:0px; left:0px;
    width:300px;
    height:200px;
}

回答2:

If you set the "position" attribute of your two canvas to "absolute", then the two canvas would stick to the parent element, say, your div. The reason why the table moves on top of your canvas is that the table, in a sense, "neglected" your canvas and was located as if there is no canvas. What you should do is keep the absolute position value of the canvas and set the "top" value of table to the height of your canvas, then the table would be just beneath the canvas. let me give you an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Animal World</title>
    <style>
        canvas {
            width: 50%;
            height: 100px;
            position: absolute;
        }
        #dog {
            z-index: 1;

        }
        #cat {
            z-index: 0;
            background-color: blue;
        }
        table{
            background-color: rgb(196, 255, 216);
            position: relative;
            top: 100px;
            border-collapse: collapse;
        }
        caption{
            font-weight: bolder;
            font-size: 2em;
            background-color:  rgb(196, 255, 216);
            border: 1px groove lightblue;
        }
        td,th{
            border: 1px groove lightblue;
           
        }
        
    </style>
</head>
<body>
    <div>
        <h1>Animal</h1>
    </div>
    <div id = "canvas">
        <canvas id = "dog"></canvas>
        <canvas id = "cat"></canvas>
    </div>
    <script>
        var dog = document.getElementById('dog');
        var cat = document.getElementById('cat');
        var dog_ctx = dog.getContext('2d');
        var cat_ctx = dog.getContext('2d');
        dog_ctx.fillStyle = "red";
        dog_ctx.fillRect(20, 20, 20, 20);
    </script>
    
    <div class = "table">
            <table>
                <caption>Animal</caption>
                <tr>
                    <th>Dog</th>
                    <th>Panda</th>
                    <th>Cat</th>
                </tr>
                <tr>
                    <td>middle</td>
                    <td>large</td>
                    <td>small</td>
                </tr>
            </table>
    </div>
</body>
</html>

来源：https://stackoverflow.com/questions/22414288/positioning-overlapping-canvas

标签

javascript

html

css

canvas