CODEWITHSUNDEEP
cssz-indexcss-position
cainy393
cainy393

Reputation: 462

z-index not working to place element on top of fixed positioned element

I'm creating a site where I have a a logo on the page that is static positioned as normal. However I have a jQuery plugin that converts it to a fixed positioned element as it hits the top of the screen when you scroll so that it sticks in place on top of a fixed position navigation bar. The problem I have is that while the logo is still static as it hasn't hit the top yet but is overlapping the navigation bar, it appears underneath the navigation bar.I have used the z-index on the logo to try and place it on top but I'm finding that this doesn't make a difference when used across static and fixed positioned elements at the same time.

Does anyone have a solution?

Edit: I thought I should mention that I have thought of a solution myself, to have the logo always fixed positioned and to adjust its position with javascript but I would like to fix this in CSS if possible.

Upvotes: 1

Views: 659

Answers (1)

kevincoleman
kevincoleman

Reputation: 493

Just add position: relative; to the styling for #logo. z-index only works on positioned elements. Tested it in jsFiddle and it seems to work.

Happy coding!

Upvotes: 1

Related Questions