css3 header.sticky,CSS3布局网格 - 粘性标头(CSS3 Layout Grid - Sticky Header)
CSS3布局网格 - 粘性标头(CSS3 Layout Grid - Sticky Header)
我正在尝试使用CSS Grid构建布局。 我希望头元素是'粘'。 也就是说，当用户滚动时，标题保持固定在视口顶部，其他内容在标题下滚动。 我想给这个标题一个背景图片。
我给背景图像分配了一个背景图像，给定了一个固定的位置值，并且应用了一个z值索引值999.下面的其他元素已经定位并给出了较低的z值索引值。
我的问题是这个设置不起作用。 我在CSS上尝试了一些变体，但背景图像或者完全消失，或者在滚动时，头部不会在屏幕上移时保持在其他元素上方。
我究竟做错了什么？ 我在这个论坛以及网络上浏览了其他问题，但无法找到答案。
任何建议非常感谢。
我的代码如下所示(包括对CSS的各种更改 - 在大多数情况下注释掉)。
body {
display: grid;
grid-template-areas: "header header header" "nav article ads" "footer footer footer";
grid-template-rows: 250px 900px 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header {
/* position:fixed;
z-index:999;*/
}
footer, article, nav, div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
padding: 1.2em;
background: url(https://placeimg.com/50/250/arch) left top repeat-x fixed;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
position: relative;
z-index: 9;
}
#mainNav {
grid-area: nav;
position: relative;
z-index: 8;
}
#siteAds {
grid-area: ads;
position: relative;
z-index: 7;
}
/* Stack the layout on small devices. */
@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
Article
Nav
Footer
I'm trying to build a layout with CSS Grid. I want the header element to be 'sticky'. That is, when the user scrolls, the header stays fixed to top of viewport and other content scrolls up and underneath header. I'd like to give this header a background image.
I've assigned a background image to the header, given it a position value of fixed and applied a z-index value of 999. Other elements below have been positioned and given lower z-index values.
My problem is that this setup doesn't work. I tried a few variations on the CSS but the background image either completely disappears or, on scroll, the header does not stay above other elements as they move up the screen.
What am I doing wrong? I browsed other questions in this forum and also on the web in general but can't find an answer.
Any suggestions much appreciated.
My code is shown below (including various changes to CSS - commented out in most cases).
body {
display: grid;
grid-template-areas: "header header header" "nav article ads" "footer footer footer";
grid-template-rows: 250px 900px 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header {
/* position:fixed;
z-index:999;*/
}
footer, article, nav, div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
padding: 1.2em;
background: url(https://placeimg.com/50/250/arch) left top repeat-x fixed;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
position: relative;
z-index: 9;
}
#mainNav {
grid-area: nav;
position: relative;
z-index: 8;
}
#siteAds {
grid-area: ads;
position: relative;
z-index: 7;
}
/* Stack the layout on small devices. */
@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
Article
Nav
Footer
原文：https://stackoverflow.com/questions/48577367
更新时间：2021-03-26 11:03
最满意答案
删除其他元素z-index 。 添加position: fixed在您的header并给它一个width和height然后z-index为1
元素定位绝对有点像层。 DOM和z-index(x和y轴是2d坐标，z轴用于堆栈)告诉它坐哪里，取决于它在DOM上的位置。
仔细阅读本文以了解详细内容......如果我尝试进一步解释，我很可能会把它搞砸。
Remove other elements z-index. add position: fixed on your header and give it a width and height then also z-index of 1
Element positioned absolute works kinda like layers. The DOM and z-index (x and y axis is 2d coords and z axis is for the stacking) tells it where to sit depending on where it is on the DOM.
Read through this for a detailed explination...I will most likely screw it up if I try explain any further.
相关问答
删除其他元素z-index 。 添加position: fixed在您的header并给它一个width和height然后z-index为1 元素定位绝对有点像层。 DOM和z-index(x和y轴是2d坐标，z轴用于堆栈)告诉它坐哪里，取决于它在DOM上的位置。 仔细阅读本文以了解详细内容......如果我尝试进一步解释，我很可能会把它搞砸。 Remove other elements z-index. add position: fixed on your header and give it
...
假设我不在这里留下任何东西。 滚动内容区域： 只需添加 height:200px; /*whatever height fits you*/
overflow-y:auto;
overflow-y控制垂直滚动条。 白色泄漏 虽然在笔中不会发生这种情况，但在2K屏幕上，可能会在主视图中添加width设置为100vw - vw代表View Width。 我的按钮在哪里？！ 好吧，它隐藏了因为你使用了transform:scale(0); 这基本上设置它没有大小:)。 这是“固定”版本https://
...
首先，你缺少用于修复floatingHeader的CSS。 这将修复您的菜单，您将不得不深入挖掘空白区域 .floatingHeader {
position: fixed;
top: 0;
}
该演示没有涵盖css部分 For one thing you are missing the CSS to fix the floatingHeader. That will fix your menu you will have to dig deeper on the empty space
...
我已经放弃了这种方法。 我接受我必须有两个表 - 一个用于标题，一个用于内容。 在两个网格的PreRender事件中，我将列设置为百分比宽度，它们排列完美。 I've given up with that approach. I just accept I have to have two tables - one for the header, one for the content. In the PreRender event of both grids I set the columns
...
我对此并不是百分之百确定，但看起来就像你向下滚动得足够远，标题的原始位置不再位于rect参数内。 这导致标题的布局属性不包含在您在for循环中迭代的attributes数组中，从而导致布局位置不再被调整到屏幕顶部的“粘性”位置。 尝试在for循环之前添加这些行for以便将粘性标题的布局属性添加到attributes数组中(如果它们尚不存在)： NSIndexPath *stickyHeaderIndexPath = [NSIndexPath indexPathForItem:0 inSection
...
部分需要一个高度，以便粘性达到你想要的效果，并且因为有粘性的潜在怪癖(即当你到达页面底部时，部分会向上推到网格行1)，我会在网格行开始部分1而不是2以及包装容器。 假设你的导航也是粘性的，我会设置它的z-index，使它位于该部分的顶部。 我还建议使用@support来使用其他人提到的固定解决方案。 main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-temp
...
好的，出于稳定性和RAM消耗的原因，有意将1000行(以及1000列)限制引入Chrome引擎。 新版本的网格功能似乎正在进行中，应该可以解决问题。 资料来源： https://bugs.chromium.org/p/chromium/issues/detail?id=688640 https://github.com/w3c/csswg-drafts/issues/1009 Ok, the 1000 rows (and also 1000 columns) limit has been inte
...
您需要使用min-height属性。 编辑CSS如下 .page-template-page_blog article.type-post, .archive article.type-post {
width: 33.33%;
float: left;
min-height: 450px;
}
这样可以确保所有物品都具有最小高度设置，当一个物品比另一个物品更大时，问题就会出现，这会占据下面的区域。 可以在line 881的style.css文件中进行此更改 You ne
...
以下是使用现有标记的示例 请注意它们从上到下流动，而不是从左到右流动。 div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 220px; /* 30px + 80px times 2 row */
}
div > * {
width: 33.33%;
box-sizing: border-box;
}
h3 {
margin: 0
...
我的版本： http ： //jsfiddle.net/gT6ze/ 或者，您可以使用position:relative为容器div ，设置padding:60px为它，位置图像在其中， position:absolute; top:0; left:0; position:absolute; top:0; left:0; 。 这样，通过设置position:absolute和top:0和bottom:0 div文本中的div元素也可以定位在parent中。 My version: http://j
...