CODEWITHSUNDEEP
javascripthtmlcsscanvas
user2933738
user2933738

Reputation: 75

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

Upvotes: 3

Views: 12103

Answers (3)

John
John

Reputation: 11

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

Upvotes: 1

Dai Niu
Dai Niu

Reputation: 559

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>

Upvotes: 0

markE
markE

Reputation: 105035

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

Upvotes: 1

Related Questions