Search code examples
csssticky

I added some CSS to get a sticky header but scrolling down pictures cover the header


I tryed to get a sticky header for my website https://sacconicase.com/case-vacanza/lignano-sabbiadoro-appartamenti-vacanze/

I found some CSS

#masthead {
position: sticky;
top: 0;
}

it works but not completely: when I scroll down the pictures cover the header


Solution

  • Add a z-index CSS property to #masthead to make its z-position higher than the images. Give masthead a z-index of 1 or higher to make it be above the other images.

    z-index of 0 Screenshot of a website with various images of apartments. Two of the images jut into the header with portions of the images above the header.

    z-index of 1 Screenshot of the same website with the header problem fixed; the images no longer appear above the header.