+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Sticky header, z-index not respected. (/showthread.php?tid=3077)
Sticky header, z-index not respected. - mischa - 25.12.2020
Hi,
Trying to create a sticky header, but somehow the z-index property is not respected.
I have added an additional class to the items I want to stick to the top of the screen and added a fixed position and z-index of 1000
to the custom CSS.
But the other items on the screen e.a objects, labels, etc. which seems to have a z-index of 80, still scroll over my sticky header.
Even tried it via custom JS, so the DOM is created and after that alter the CSS properties. But still no effect.
Find it also strange that when you change something about an object or label, for example, the order of the items in the HTML changes.
RE: Sticky header, z-index not respected. - buuuudzik - 25.12.2020
https://coder-coder.com/z-index-isnt-working/
RE: Sticky header, z-index not respected. - admin - 25.12.2020
What buuuudzik linked to is right. You can only change element order inside the parent container. One solution is to move the required elements from their original container to body element via JavaScript.
RE: Sticky header, z-index not respected. - mischa - 25.12.2020
position items sticky in the custom CSS and then adding the z-index in the custom javascript, so it can't be overridden.
and tweaking a bit with the margins got it done!
When editing the properties of an element (object, label,ect) only applying changes is enough to place the item on the bottom of the HTML stacking! I find this weird behaviour because if you put an object on top of an image and you alter the image the object will disappear behind the image.