My dropdown has z-axis: 100 and my table doesnt have z-index active, why the header of my table is overlapping?
Hi Pedro 
have you checked your table to make sure it really doesn’t have a Z-index applied to it?
It seems your table headers have their own z-index value.
Let’s try:
- Check all parent containers for unexpected z-index or position settings.
- Inspect elements in the browser dev tools to see which layer is actually on top.
- Experiment with raising the dropdown’s z-index even higher, or setting position and z-index directly on relevant parent containers.
- Verify if the issue appears only in the editor or also after publishing.
Let me know if this helped
I had that recently happen to a Select. I spent 1-2 hours going over every bloody setting over and over trying to find where the z-axis might be higher. It was the exact same as here, it was only the text of the table header that overlapped, not the rest of the box. But absolutely nothing said it overlapped that I could find. Even tried hard coding a z-index in the CSS.
I never pushed it live to test because it’s an active app, so I wasn’t about to launch a known bug into the world (another case for a live test environment but that’s another story).
Eventually what I came to was I had been using a depreciated Select, so I changed it out for a new one and everything worked perfectly. So maybe there’s a z-indexing issue with the depreciated selects? Who knows. But that was the only fix I could find.
1 Like
Turns out my Sidemenu section had a z-index: 1, that’s why I was having the issue. Thanks!
2 Likes
I had the same problem last week and had to use the deprecated select
1 Like