gpt4 book ai didi

html - CSS3 布局网格 - 粘性标题

转载 作者:太空宇宙 更新时间:2023-11-04 07:40:21 25 4
gpt4 key购买 nike

我正在尝试使用 CSS 网格构建布局。我希望 header 元素具有“粘性”。也就是说,当用户滚动时,标题保持固定在视口(viewport)顶部,而其他内容向上滚动并位于标题下方。我想给这个标题一个背景图片。

我已经为标题分配了一个背景图像,给它一个固定的位置值并应用了一个 999 的 z-index 值。下面的其他元素已经定位并被赋予较低的 z-index 值。

我的问题是这个设置不起作用。我在 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;
}
}
<body>

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

</body>

最佳答案

移除其他元素 z-index。在你的 header 上添加 position: fixed 并给它一个 widthheight 然后 z-index 共 1 个

元素绝对定位有点像图层。 DOM 和 z-index(x 和 y 轴是二维坐标,z 轴用于堆叠)告诉它根据它在 DOM 上的位置坐在哪里。

通读this详细解释......如果我尝试进一步解释,我很可能会把它搞砸。

关于html - CSS3 布局网格 - 粘性标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48577367/

25 4 0
文章推荐: python - Python 字符串切片中的 + 是什么意思?
文章推荐: java - Jsoup运行时错误: Exception in thread "main" java. lang.NoClassDefFoundError
文章推荐: java - 外部文件中的系统属性?
文章推荐: HTML
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com