3 ms·
Was hoping this would have a section titled "how to manage around missing z-index functionality."
by wwweston 8y ago
Was hoping this would have a section titled "how to manage around missing z-index functionality."
- CharlesW 8y agoTIL, thank you. Just so I understand, you're looking for workarounds like [1]? [1] https://codepen.io/osublake/pen/YXoEQe https://codepen.io/osublake/pen/YXoEQe
- wwweston 8y agoTIL that appendChild will take existing nodes out of their existing spot in a document (as well as the more obvious action of appending them to another node). :) This is a good start, but it's limited to "move to front." If you wanted to move something between two intermediate planes, you'd have to reshuffle the whole stack.
- paulgb 8y agoYou could use <g> tags for this, e.g. <svg> <g id="z-order-0"></g> <g id="z-order-1"></g> <g id="z-order-2"></g> </g> Then you can change the z-order by moving the element to the appropriate group. Elements are rendered in the order of an inorder traversal which is why this works.
- wwweston 8y agoI like this -- I'm sure there's some annoying corner cases, but at first glance I think it covers most of the use cases I've worried about. Thanks!
- perilunar 8y agoThere's also insertBefore, which you can use to move a node anywhere: parentNode.appendChild(node); // move to top parentNode.insertBefore(node, parentNode.firstChild); // move to the bottom parentNode.insertBefore(node, someNode); // move just below someNode parentNode.insertBefore(node, someNode.nextSibling); // move just above someNode