Primary issue: Slideshow dots needed to be clickable, but setting their z-index to ≥3 caused them to sit above and visually overlap the header in the Shopify Dawn theme.
Solution implemented: A CSS rule added to base.css targeting the slideshow section, with position: relative and z-index: 1. The key fix was adding !important to z-index: 1, which corrected stacking without breaking dot clickability.
Technical notes:
Alternative suggestion: Set z-index on main#MainContent, but it wasn’t needed after the above fix.
Outcome: Resolved. The header no longer gets overlapped, and the slideshow dots remain clickable. No further action items; thread closed with confirmation of success.
See, I need to make slideshow dots clickable, and I have managed to. But I can only make it clickable with z-index. And the min z-index to make it clickable is 3. So I need a way to keep it clickable and not let it overflow on the header. So that is why I need to increase the z-index of the header. Hope you understand now.
This is what it looks like because of it
Thanks
Add this code in your base.css:
section#shopify-section-template--15651735601240__75743119-5a88-4893-a94f-b8ec72fe682e {
position: relative !important;
z-index: 1;
}
Result:
Unfortunately it did not work 
Do you want access to my store? What is your gmail
Add !important to z-index: 1;
z-index: 1 !important;
THANK YOU SO MUCH!
YOU ARE GOATED 
Try setting implicit z-index on the element which contains all page sections:
main#MainContent {
z-index: 1;
}
nvm, the goat @Spac-es solved it. though thanks for your help. appreciate it g