我想创建一个投资组合网站，并且正在努力创建页面：
视觉元素包括页眉、边栏、内容的框架和内容本身。我已经为所有元素设计了一个网格，并根据页眉中徽标的计算尺寸动态调整大小。
现在我有一个问题，内容溢出，因此应该是可滚动的，但是页眉和框架(字面上是旧画中的框架(在滚动时不会移动，并且总是在顶部。
带有网格的容器的大小由视口定义，溢出被隐藏。包含Content的容器的大小由其内容定义，溢出是可滚动的。使用z索引或容器顺序，内容被放置在页眉和框架下方的层上。这不起作用，因为一旦可滚动内容的层不在所有内容的顶部，它就变得不可滚动了。用指针事件修改上面的层：没有指针事件是不可能的，因为它们包含站点导航。将内容和页眉/提要栏/框架的单独网格堆叠在一起似乎会遇到相同的层问题。
在网格系统中，如何设计一个在固定标题下具有可滚动内容的网站？我会非常感谢你的帮助，我保证我试过在网上查找，但没有真正看到它被讨论过。例如，由于层问题，Michael X的这种方法对我不起作用：https://medium.com/@beyondbounds/beginner-css-grid-sticky-navigation滚动内容-7c4de0a8d1dc
我添加了相关代码：
/* ////////////////////////////////////////////////////////////ROOT */
:root {
--margin-left: min(10vw, var(--max-margin-left));
--max-margin-left: 6rem;
--margin-right: min(10vw, var(--max-margin-right));
--max-margin-right: 8rem;
--margin-top: 2rem;
--margin-bottom: 2rem;
--dimensions-logo: min(20vw, var(--max-dimensions-logo));
--max-dimensions-logo: 8rem;
--padding-logo: calc(var(--dimensions-logo) / 7);
--margin-left-content: calc(var(--margin-left) + var(--dimensions-logo) + 3 * var(--padding-logo));
--margin-right-content: calc(var(--margin-right) + 2 * var(--padding-logo));
--margin-top-content: calc(var(--margin-top)) + var(--dimensions-logo) + 3 * var(--padding-logo));
--margin-bottom-content: calc(var(--margin-bottom) + 2 * var(--padding-logo));
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ////////////////////////////////////////////////////////////HTML-ROOT */
html {
line-height: 1.15;
}
body {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
/* ////////////////////////////////////////////////////////////LAYOUT */
/* ///////////////////////////////GRID */
.layout-main {
position: relative;
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: var(--margin-left) var(--dimensions-logo) var(--padding-logo) var(--padding-logo) var(--padding-logo) 1fr var(--padding-logo) var(--padding-logo) var(--margin-right);
grid-template-rows: var(--margin-top) var(--dimensions-logo) var(--padding-logo) var(--padding-logo) var(--padding-logo) 1fr var(--padding-logo) var(--padding-logo) var(--margin-bottom);
}
.layout-content {
position: absolute;
top: var(--margin-top-content);
bottom: var(--margin-bottom-content);
overflow-y: scroll;
grid-column: 6 / 7;
grid-row: 6 / 7;
}
/* ///////////////////////////////LOGO */
.cont-logo {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.logo {
width:100%;
height: auto;
}
/* ///////////////////////////////NAVIGATION */
.cont-topheader {
grid-column: 4 / 9;
grid-row: 2 / 3
}
.cont-leftaside {
grid-column: 2 / 3;
grid-row: 4 / 7;
}
/* ///////////////////////////////FRAME */
.cont-frame {
position: relative;
grid-column: 4 / 9;
grid-row: 4 / 9;
}
.c1 {
width: var(--dimensions-logo);
height: auto;
}
.c2 {
position: absolute;
right: 0;
bottom: 0;
width: var(--dimensions-logo);
height: auto;
}
/* ///////////////////////////////BACKGROUND*/
.cont-uppergradient {
height: 100%;
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0.8939776594231442) 6%, rgba(255,255,255,1) 10%);
}
.cont-lowergradient {
height: 100%;
background-color: #767575;
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0) 0%, rgba(255,255,255,0.8939776594231442) 20%, rgba(255,255,255,1) 10%);
}
////////////////////////////////////////////////////////////NAVIGATION */
.primary-nav {
width: var(--dimensions-logo);
height: var(--dimensions-logo);
}
#primary-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
width: auto;
height: 100%;
}
.primary-inf {
margin-top: var(--padding-logo);
}
#secondary-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
width: auto;
height: var(--dimensions-logo);
}
.secondary-nav {
width: var(--dimensions-logo);
height: var(--dimensions-logo);
}
#secondary-nav {
width: auto;
height: 100%;
}
ul {
list-style: none;
padding-left: 0em;
}
a {
font: var(--font-family-sans-serif);
color: var(--font-navigation);
}
a:hover {
font-size: calc(var(--dimensions-logo) / 6);
}
.menu-item {
font-size: calc(var(--dimensions-logo) / 7);
text-align: center;
border-style: solid;
border-width: calc(var(--dimensions-logo) / 44);
background-color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PAGE</title>
</head>
<body>
<div class = "layout-main">
<div class = "cont-gradient cont-uppergradient"></div>
<div class = "cont-gradient cont-lowergradient"></div>
<section class = "cont-logo">
<img class = "logo" src="link-to-logo">
</section>
<header class = "cont-topheader">
<nav class = "secondary-nav">
<?php
wp_nav_menu(
array(
'menu' => 'secondary-nav',
'container' => '',
'theme_location' => 'secondary-nav',
'items_wrap' => '<ul id="secondary-nav">%3$s</ul>',
)
);
?>
</nav>
</header>
<aside class = "cont-leftaside">
<nav class = "primary-nav">
<?php
wp_nav_menu(
array(
'menu' => 'primary-nav',
'container' => '',
'theme_location' => 'primary-nav',
'items_wrap' => '<ul id="primary-nav">%3$s</ul>',
)
);
?>
</nav>
<nav class = "primary-inf">
<?php
wp_nav_menu(
array(
'menu' => 'primary-inf',
'container' => '',
'theme_location' => 'primary-inf',
'items_wrap' => '<ul id="primary-inf">%3$s</ul>',
)
);
?>
</nav>
</aside>
<div class = "cont-heading">
<div class = "page-heading-box"><p><?php the_title(); ?></p></div>
<div class = "post-heading-box"><p><?php the_post(); ?></p></div>
</div>
<div class = "cont-frame">
<img class = "c1" src="link-to-frame-image-1"></img>
<img class = "c2" src="link-to-frame-image-2"></img>
</div>
<div class = "layout-content">
<div class = "cont-content">
<article class = "a-scrollable-article">
<p>article-testBEGINNING</p>
</div>
</div>
</div>
</body>
</html>重叠内容布局的问题是元素可能会阻碍指针事件，从而使下面的元素不再具有交互性。快速解决方案是用指针事件修改阻碍元素：
.body {
position: relative;
}
.element-top {
position: absolute;
pointer-events: none
}
.element-bottom {
position: absolute;
background-color: red;
}
.element-bottom:hover {
background-color: green;
}<body>
<div class = "element-bottom">_</div>
<div class = "element-top">_</div>
</body>然而，这可能并不总是一个选项——例如，当顶部元素的层上有交互式元素时。在这种情况下，更有组织的布局和分层可以帮助消除这些冲突：使用一个主网格为不同的重叠页面部分指定区域，但要确保只有底层覆盖整个视口。通过将页面上的交互式元素限制在子网格中，确保它们只遮挡它们需要的位置。