使网格项目重叠

Question

我正在尝试实现 css 网格模式，其中 header 覆盖下一行。

我已经在顶部添加了一段带有 header 的代码，所附图片应该向您展示了我正在努力实现的目标。

谢谢

body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 80px 1fr 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: 80px 1fr 70px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}
header, footer, article, nav, div {
  padding: 1.2em;
  background: gold;
  }
#pageHeader {
  grid-area: header;
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

Answer 1

要实现您想要实现的目标，您可以使用多种解决方案

解决方法一
解决方案一包括在 header 上使用 position: fixed CSS 样式。
注意：这将使 header 保持在顶部并在您向下滚动时保持在那里。如果你给 header 一个 opacity 属性让我们说 0.8 并且在悬停时 opacity 为 1 它会产生很大的影响。

解例一

    body {
        display: grid;
        grid-template-areas:
                "header header header"
                "nav article ads"
                "footer footer footer";
        grid-template-rows: 80px 1fr 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: 80px 1fr 70px 1fr 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;
    }

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

方案二
解决方案二包括使用更 'not liked' 的方式来使用 CSS。它包括对 header 下的所有内容使用负边距。让我们说在 header 下的所有内容上添加一个 <div id="main-content"> 并在此 div.

上添加让我们说 margin-top: -100px; 属性的负边距

解例二

    body {
        display: grid;
        grid-template-areas:
                "header header header"
                "nav article ads"
                "footer footer footer";
        grid-template-rows: 80px 1fr 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: 80px 1fr 70px 1fr 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;
    }

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

Answer 2

您正在使用 grid-template-areas 属性以 ASCII 艺术排列布局。

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

此方法适用于不重叠的网格区域。

但是代码中字符串是不能重叠的，所以这个方法不能用来重叠网格区域

换句话说，"header header header"和"nav article ads"可以在X轴和Y轴上相互上下，但不能在Z轴上。

要使网格区域重叠，您需要另一种方法。

CSS 网格提供 line-based placement 作为 grid-template-areas 的替代方法。

基于行的放置本质上意味着使用以下属性来确定网格项的大小和位置：

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

和 shorthands:

grid-column
grid-row

body {
  display: grid;
  grid-template-rows: 80px 1fr 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;
}

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

grid-row 和 grid-column 属性控制网格项的位置和大小。

grid-column: 1 / 4 表示网格项目将从网格列的第一行到第四行（即，该项目将跨越第一、第二和第三列）
grid-row: 3表示网格项将位于第三行（从网格行第3行到auto，当省略第二个值时默认应用。）

使用这种定位网格项的方法，您可以轻松地使它们重叠。

使网格项目重叠

Make grid items overlap

html

css

css-grid

jsFiddle