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
Post a Comment