3

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

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

谢谢

在此处输入图像描述

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>

4

2 回答 2

7

您正在使用该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 提供基于行的放置作为grid-template-areas.

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

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

和速记：

  • 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

于 2017-05-03T12:41:56.827 回答
-1

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

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

解决方案一示例 

    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">在标题下的所有内容上添加一个，并margin-top: -100px;在这个div上添加一个让我们说属性的负边距。

解决方案二示例 

    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>

于 2017-05-03T08:57:52.770 回答