This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

Sticky header, z-index not respected.
#1
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.
Reply
#2
https://coder-coder.com/z-index-isnt-working/
Done is better than perfect
Reply
#3
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.
Reply
#4
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.
Reply


Forum Jump: