javascript - CSS: z-index doesn't work prperly when i append the new div element -


I want to apply the website about attracting some rectangles and stickers configured by the devil element.

Click the sticker or rectangle, user button.

I want to arrange the div element in the sequence below

(upper) sticker & gt; Rack & gt; Rectangle & gt; Canvas (bottom)

So I used the Z index in the style sheet.

  #canvas {status: relative; Z-index: 1; ...}. [Position: Absolute! Important; Z-index: 2! Important; ...} .rack {status: complete! Important; Z-index: 3! Important; ...}. Sticker {status: complete! Important; Z-index: 4! Important; ...}   

This works well, when the elements are allocated by HTML code.

  & lt; Div id = "canvas" & gt; & Lt; Div square = "rectangle dragableable" style = "left: 0 px; top: 0 pixel; width: 200 px; height: 300px;" Type = "rectangle" id = "rectangle_org" & gt; & Lt; Div class = "rack dragableable size" style = "left: 0; above: 40px; width: 50px; height: 100px;" & Gt; & Lt; / Div & gt; & Lt; Div class = "sticker sticker_green dragable" type = "sticker" id = "green" style = "left: 0 px; top: 0 pixels;" & Gt; & Lt; / Div & gt; & Lt; Div class = "sticker sticker_eagle dragable" type = "sticker" id = "yellow" style = "left: 30px; top: 0px;" & Gt; & Lt; / Div & gt; & Lt; Div class = "sticker sticker_read dragable" type = "sticker" id = "red" style = "left: 60px; top: 0px;" & Gt; & Lt; / Div & gt; & Lt; Div class = "sticker sticker_grey dragable" type = "sticker" id = "gray" style = "left: 90px; top: 0px;" & Gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   

When I click on the button to add element to the canvas, it does not work properly.

Cover new rectangular stickers, even if z-index is less than rectangular sticker.

I think the z-index of these are as below

(upper) New Sticker & gt; New rack & gt; New Rectangle & gt; Old Sticker & gt; Old rack & gt;

Please correct this error.

Please see this Bela ()

When you have a new element If you add, the z-index goes back to 0 . I have not tested it on other browsers, but it happens in Chrome.

You have to manually set z-index on the append element, or some logic will automatically be set to z-index for your elements Assign.

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -