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

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>

Edit: Here's a fiddle

Share Improve this question edited Mar 14, 2014 at 20:16 asked Mar 14, 2014 at 19:39 user2933738 751 gold badge1 silver badge9 bronze badges

Posting a fiddle would help. – juan.facorro Commented Mar 14, 2014 at 19:48

Add a ment |

3 Answers 3

Sorted by: Reset to default 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;
}

Definitely use flex-box to float stacked canvases to perfection. Note: you'll need to use "display: flex" for the entire layout including HTML and BODY elements, plus any parent containers/ divs.

#canvasWrapper {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
  }

canvas {
    position: absolute;
  }

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Positioning overlapping canvas - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)