使网格项目重叠 [英] Make grid items overlap

问题描述

我已经添加了一段代码，其中的标题位于顶部，附件图片应该会显示出我想要达到的效果。

谢谢

body {display：grid; grid-template-areas：header header headernav article adsfooter footer footer; grid-template-rows：80px 1fr 70px;网格模板列：20％1％和15％; grid-row-gap：10px; grid-column-gap：10px;身高：100vh;保证金：0; } / *在小设备/视口上堆叠布局。 * / @ media all和（max-width：575px）{body {grid-template-areas：headerarticleadsnavfooter; grid-template-rows：80px 1fr 70px 1fr 70px; grid-template-columns：1fr; }}页眉，页脚，文章，导航，div {padding：1.2em;背景：黄金; } #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>< nav id =mainNav> Nav< / nav>< div id =siteAds>广告< / div>< ; footer id =pageFooter> Footer< / footer>




解决方案

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

  body {
 display：grid; 
 grid-template-areas：
页眉标题
导航文章广告
页脚页脚; 
 ... 
} 
  

这种方法适用于网格区域'重叠。

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

换句话说，标题标题标题和导航文章广告可以高于和低于每个标题其他的在X和Y轴上，但不在Z轴上。

为了使栅格区域重叠，您需要另一种方法。 b $ b

CSS网格提供 基于行可以替代 grid-template-areas 。

基于线条实质上，使用以下属性来确定网格项的大小和位置：

• 网格行-start


• 网格行结束


• grid-column-start


• grid-column-end

和简写：

• grid-column


• grid-row


$ b

body {display：grid; grid-template-rows：80px 1fr 70px;网格模板列：20％1％和15％; grid-gap：10px; / *网格行间距和网格列间距的简写* / height：100vh; margin：0;}＃pageHeader {grid-row：1; / *请参阅下面的注释* / grid-column：1/4; / *请参阅下面的注释* / 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;背景：gold;}

< header id =pageHeader >标题< / header>< article id =mainArticle>文章< / article>< nav id =mainNav> Nav< / nav>< div id =siteAds> Ads< / div>< footer id =pageFooter>页脚< / footer>

$ b

网格行和网格列属性控制网格项的位置和大小。 / p>





• 网格列：1/4 表示网格项将跨越网格列第一行到第四行（即该项目将跨越第一列，第二列和第三列）


• grid-row：3 表示网格项目将位于第3行（从网格行第3行到 auto ，默认情况下应用第二个值时省略。）






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





jsFiddle




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 what I am trying to achieve.

Thanks

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>

解决方案

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

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

这篇关于使网格项目重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！