CODEWITHSUNDEEP
htmlcsscanvas
Den
Den

Reputation: 101

CSS Wordpress z-index not stacking canvas elements

I'm triyng to stack 2 canvas elements on Wordpress site. Problem is that canvas elements refuse to stack.

Link to actual page: WebPage

CSS:

 #plane{
    position:relative;
    z-index: 110;
    border: 1px solid black;
    width: 100%;
}
#plane1{
    position:relative;
    z-index: 120;
    border: 1px solid black;
    width: 100%;
}

was using clear:both;, left: 0px;, top: 0px; but it didn't make any difference. The only way to shift second canvas to the top is to add top: -200px; but top: -100% dose not work :-[[[ Need help with this.

Upvotes: 0

Views: 63

Answers (1)

user1693593
user1693593

Reputation:

You can try this:

  • Wrap them inside a common div which you set position:relative; on
  • Then set position:absolute; for both the canvas elements inside that div element
  • Use left:0;top:0; (unit not needed when 0) to adjust the position for the canvases if necessary

Using relative on parent element makes the absolute positioned elements inside it relative to it. If you use relative on both you would need to adjust the position for one of them (as you already discovered).

Upvotes: 1

Related Questions