使网格项目重叠

Question

我正在尝试实现标题覆盖下一行的 CSS 网格模式。

我已经添加了我的代码的 sn-p，顶部带有标题，所附图像应该向您展示我想要实现的目标。

谢谢

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

您正在使用 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 Grid 提供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，省略第二个值时默认应用。）

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

jsFiddle

Answer 2

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

解决方案一
解决方案一包括在标题上使用position: fixed CSS 样式。
注意：这将使标题保持在顶部并在您向下滚动时保持在那里。如果你给标题一个 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>

解决方案二
解决方案二包括使用更“不喜欢”的方式使用 CSS。它包括在标题下的所有内容上使用负边距。假设在标题下的所有内容上添加<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>