Brad Bansner
asked on
Fixed navigation <div> elements with other elements over top
My test page:
http://sterlingmodular.com/test
Each of the colored bars running across the page is a <div> with position:fixed.
Now, I want to place the logo <img> and have it be overtop the colored bars, but it is behind (you can see part of it below the third bar). It comes after the bars in the markup, so I thought it would always be on top. The position:fixed changes that?
Is there some other way I can make the colored bars more of a background, so that I can put the logo overtop? Other than doing a position:absolute with the logo, set a z-index, etc.?
Basically, how do I keep those bars as position:fixed, but not have them affect other elements place overtop? They should be behind everything else.
Thank you!
http://sterlingmodular.com/test
Each of the colored bars running across the page is a <div> with position:fixed.
Now, I want to place the logo <img> and have it be overtop the colored bars, but it is behind (you can see part of it below the third bar). It comes after the bars in the markup, so I thought it would always be on top. The position:fixed changes that?
Is there some other way I can make the colored bars more of a background, so that I can put the logo overtop? Other than doing a position:absolute with the logo, set a z-index, etc.?
Basically, how do I keep those bars as position:fixed, but not have them affect other elements place overtop? They should be behind everything else.
Thank you!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If you want something to be fixed background, the turn it into an image and set it as the fixed background. If you want it to be part of content, then learn to use css to do real layout instead of just plopping thing in a page using fixed and/or absolute positioning.
Cd&
Cd&
ASKER
My reasoning behind doing the separate <div> elements is because I may want to use those same backgrounds elsewhere in the website. I thought I would define them once, and reuse as necessary. Maybe I can put all three in a <div> and fix that <div>, instead of fixing each individual one?
Thanks for your input, I will go through this in more detail tomorrow.
Thanks for your input, I will go through this in more detail tomorrow.
If you want to use the same background in other parts of the site, just set it up as a sprit.
Consider this when taking the extra steps to make a sprit; assume the think slice is 3k, viewed a 10,000 times is about 30 megs of bandwidth. If you save 2k by using the sprite, that's 20 megs of bandwidth. I think you would need to see a million page views before the bandwidth savings make a difference.
Consider this when taking the extra steps to make a sprit; assume the think slice is 3k, viewed a 10,000 times is about 30 megs of bandwidth. If you save 2k by using the sprite, that's 20 megs of bandwidth. I think you would need to see a million page views before the bandwidth savings make a difference.
ASKER
Thanks for your good advice. I'm still working on it, but I think I know what to do now.
Open in new window