All threads / How to use position fixed and a z index together

Ask A Question


You’re not receiving notifications from this thread.

How to use position fixed and a z index together

BernalTurado asked in CSS

i have a custom cursor on my page, the z index is 7.When I hover over the text on the footer, i want the text to overlap the white, I put z index 12 on the text to make it higher but it is not being respected. Something to do with the stacking context.. ? When i change the .footer--slideup position from fixed to absolute, i get the desired effect that i want with the cursor and the text, however this messes up my footer not sticking to the bottom of the page.

Does your footer--slideup need to have a position fixed?

Because that's why you are having problems, it won't ever respect the z-index you'll add to your childs within it

If you could re-work your layout to not use position fixed, like by using flexbox with a flex-grow: 1; on your wrapper to push down the footer instead, then you won't have any problems by just adding a arbitrary z-index value to the childs.

I know.. z-index is a major headache always :( That's why most of us use "portals" and other crap to just have them as near the "body" as possible

Let me know if you need a codepen demo and I'll whip one up for ya <3

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 35,699+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.