使网格项重叠

Question

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

我添加了一段代码片段，标题位于顶部，附加图片应该显示我想要实现的目标。

由于

＆＃13;

＆＃13;

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; 
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

• grid-column: 1 / 4表示网格项将跨越网格列第一到第四行（即项目将跨越第一，第二和第三列）
• grid-row: 3表示网格项目位于第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>