How to layer elements with CSS position property?


Tags: javascript,css,canvas,position

Problem :

I've looked at all the questions on here asking the same thing and tried every suggestion, none of it is working for me.

I want to layer two dynamically created canvas elements on top of each other, inside the div with an id of "plotPlaceholder".

It continues to just show one below the other, like so:

enter image description here

// grab elements from form
var wid = document.getElementById("wid").value;
var hei = document.getElementById("hei").value;

// grab div container and create canvas elements
var canvasPlaceholder = document.getElementById("plotPlaceholder");
var baseCanvas = document.createElement("canvas");
var canvasElement = document.createElement("canvas");

canvasElement.width = wid;
canvasElement.height = hei;
baseCanvas.width = wid;
baseCanvas.height = hei;
baseCanvas.style.zIndex = "1";
canvasElement.style.zIndex = "2";
    
baseCanvas.id = "canvasToHoldGrid";
canvasElement.id = "plottingCanvas";
canvasPlaceholder.appendChild(baseCanvas);
canvasPlaceholder.appendChild(canvasElement);
canvas {
    border: 2px solid #27a3ea;
    position: absolute;
    top: 0;
    left: 0;
}

#plotPlaceholder {
    position: relative;
}
<div id="plotPlaceholder"></div>



Solution :

I found out what was happening - there was an extra div being created (parent of the canvas elements) with a class of 'canvas-container'. The position property was being overwritten.

.canvas-container {
    position: absolute !important;
    top: 0;
    left: 0;
}

That !important fixed it, although I'm sure it's not best practice in most circumstances.


    CSS Howto..

    How can I make a split-text input placeholder?

    How to use CSS Background-size: cover; but leave space for menu?

    How to ensure each DIV appears on it's own without overlapping

    How to create Curved & Overlapping Menu Tabs in CSS

    How to display a border-bottom only if table cells are not empty (CSS)

    Displaying the first in simple Show / Hide content menu with active a

    How do I put a horizontal line/border right in the middle of a table row?

    How to process which button is selected in an HTML form?

    HTML/CSS slideshow without javascript

    how to avoid extra blank page at end while printing?

    How to hide old styled version of select option? [duplicate]

    How to avoid this overlapping in plain CSS?

    If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

    How to overlap divs in html

    How to style this triangle on a circular image?

    How to add objects in a DIV and appear above the DIV

    how to vertically center align div elements with contents other than text

    How to change radio button place & add line separator

    Option element bigger than select box - how to get the options list to expand to the left?

    How to copy only referenced .css to dest with gulp?

    How to make text appear at the top left corner?

    How to make an empty div or container glow with pure CSS?

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    How to create a

    how to show like chat box for the div/p tag top left/right corners

    How can I set the width of something in jquery based on variables?

    How to call the event of one element in another element in JQuery

    How to load different CSS based on the category of the post on WP

    How to disable CSS style relatively to a certain parent tag?

    How to use inline CSS by th:style using “The ? : operator” in ThymeLeaf