Menu
I have a website with a fixed image at the top of my screen. When I scroll down my page the image stays at the top like it should. However, all content below overlaps my image and it is then covered.
How do I make my top bar (image) always stay on top? I want it to cover the content of the page as you scroll.
247
Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a position other than static set on it, too. position relative and z index set to 999999999999999999999999999999999999999999999999999. in chrome.
The vertical position of the element to be stuck can also be modified with the help of the 'top' property. It can be given a value of '0px' to make the element leave no space from the top of the viewport, or increased further to leave space from the top of the viewport.
Ensure position is on your element and set the z-index to a value higher than the elements you want to cover.
element { position: fixed; z-index: 999; } div { position: relative; z-index: 99; } It will probably require some more work than that but it's a start since you didn't post any code.
105
Assuming that your markup looks like:
<div id="header" style="position: fixed;"></div> <div id="content" style="position: relative;"></div> Now both elements are positioned; in which case, the element at the bottom (in source order) will cover element above it (in source order).
Add a z-index on header; 1 should be sufficient.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
