Make Grid Items Overlap

I am trying to achieve a css grid pattern where the header is overlaying the next row. I have added a snippet of my code with the header on top, the attached image should show you

Solution 1:

You're using the grid-template-areas property to arrange the layout with ASCII art.

body { 
  display: grid;
  grid-template-areas: 
    "header header header""nav article ads""footer footer footer";
  ...
}

This method works fine for grid areas that don't overlap.

But strings cannot overlap in the code, so this method cannot be used to overlay grid areas.

In other words, "header header header" and "nav article ads" can be above and below each other on the X and Y axes, but not the Z axis.

To make grid areas overlap you'll need another method.

CSS Grid provides line-based placement as an alternative to grid-template-areas.

Line-based placement means, in essence, using this following properties to determine a grid item's size and location:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

and the shorthands:

• grid-column
• grid-row

body {
  display: grid;
  grid-template-rows: 80px1fr 70px;
  grid-template-columns: 20%1fr 15%;
  grid-gap: 10px;       /* shorthand for grid-row-gap and grid-column-gap */height: 100vh;
  margin: 0;
}
#pageHeader {
  grid-row: 1;          /* see notes below */grid-column: 1 / 4;   /* see notes below */background-color: crimson;
  z-index: 1;
  opacity: .5;
}
#pageFooter {
  grid-row: 3;
  grid-column: 1 / 4;
}
#mainArticle {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
#mainNav {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}
#siteAds {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
}
header, footer, article, nav, div {
  padding: 1.2em;
  background: gold;
}

<headerid="pageHeader">Header</header><articleid="mainArticle">Article</article><navid="mainNav">Nav</nav><divid="siteAds">Ads</div><footerid="pageFooter">Footer</footer>

The grid-row and grid-column properties control the location and size of grid items.

• grid-column: 1 / 4 means the grid item will span from grid column lines one to four (i.e, the item will span across the first, second and third columns)
• grid-row: 3 means the grid item will be located on row three (from grid row line 3 to auto, which is applied by default when the second value is omitted.)

With this method of positioning grid items, you can easily make them overlap.

jsFiddle

Solution 2:

To achieve what you want to achieve you could use multiple solutions

Solution one Solution one consists of using a position: fixed CSS styling on the header. Note: This will make the header stay on top and stay there when you're scrolling down. if you would give the header an opacity attribute of lets say 0.8 and on hover an opacity of 1 it will have a great affect.

Solution one example

body {
        display: grid;
        grid-template-areas:
                "header header header""nav article ads""footer footer footer";
        grid-template-rows: 80px1fr 70px;
        grid-template-columns: 20%1fr 15%;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        height: 100vh;
        margin: 0;
    }
    /* Stack the layout on small devices/viewports. */@media all and (max-width: 575px) {
        body {
            grid-template-areas:
                    "header""article""ads""nav""footer";
            grid-template-rows: 80px1fr 70px1fr 70px;
            grid-template-columns: 1fr;
        }
    }
    header, footer, article, nav, div {
        padding: 1.2em;
        background: gold;
    }
    #pageHeader {
        grid-area: header;
        z-index: 1999;
        position: fixed;
        background-color: orange;
        width: 100%;
        opacity: 0.8;
    }
    #pageHeader:hover {
        opacity: 1;
    }
    #pageFooter {
        grid-area: footer;
    }
    #mainArticle {
        grid-area: article;
    }
    #mainNav {
        grid-area: nav;
        height: 2000px;
    }
    #siteAds {
        grid-area: ads;
    }

<headerid="pageHeader">Header</header><articleid="mainArticle">Article</article><navid="mainNav">Nav</nav><divid="siteAds">Ads</div><footerid="pageFooter">Footer</footer>

Solution two Solution two consists of using a more 'not liked' way of using CSS. it consists of using negative margins on all the content under the header. by lets say adding a <div id="main-content"> on all the content under the header and adding a negative margin of lets say margin-top: -100px; attribute on this div.

Solution two example

body {
        display: grid;
        grid-template-areas:
                "header header header""nav article ads""footer footer footer";
        grid-template-rows: 80px1fr 70px;
        grid-template-columns: 20%1fr 15%;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        height: 100vh;
        margin: 0;
    }
    /* Stack the layout on small devices/viewports. */@media all and (max-width: 575px) {
        body {
            grid-template-areas:
                    "header""article""ads""nav""footer";
            grid-template-rows: 80px1fr 70px1fr 70px;
            grid-template-columns: 1fr;
        }
    }
    header, footer, article, nav, div {
        padding: 1.2em;
        background: gold;
    }
    #pageHeader {
        grid-area: header;
        background-color: orange;
        opacity: 0.8;
    }
    #pageFooter {
        grid-area: footer;
    }
    #mainArticle {
        margin-top: -100px;
        grid-area: article;
    }
    #mainNav {
        margin-top: -100px;
        grid-area: nav;
    }
    #siteAds {
        margin-top: -100px;
        grid-area: ads;
    }

<headerid="pageHeader">Header</header><articleid="mainArticle">Article</article><navid="mainNav">Nav</nav><divid="siteAds">Ads</div><footerid="pageFooter">Footer</footer>