Context:
我正在尝试制作明显集中的菜单项，当鼠标悬停时改变颜色并扩大尺寸。虽然设置另一种颜色很容易，但尝试将其横向移动是一项比我想象的更复杂的任务。运动本身按其应有的方式工作，但项目的 z 索引变得混乱。
Issue:
背景颜色已按其应有的方式设置，但理论上 div 元素后面的文本在菜单上仍然可见。应该留在菜单后面的文本容器和菜单项（及其父级）都是相对定位的，所以根据我读过的规则，它应该可以工作。
倒退...？解决方案：
尽管如此，似乎将文本容器 z-index 设置为 -1 涵盖了这个问题，但又给了我另一个问题：光标将不会检测到它悬停的文本，从而使用户在文本上保留默认光标。当在初始视口之外滚动时，鼠标按预期工作。
我在这里包含了每个问题的视频演示：
https://vimeo.com/user94860029/review/316054562/95dd13f82e https://vimeo.com/user94860029/review/316054562/95dd13f82e[文本上的 Z 索引为 0 或正数，菜单项上的 Z 索引为 10]
https://vimeo.com/user94860029/review/316054577/114ab82823 https://vimeo.com/user94860029/review/316054577/114ab82823[文本容器上的 Z 索引为负，菜单项上的 Z 索引为 10]
html,
body {
border: 0;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
}
#top-menu {
position: fixed;
top: 0px;
background-color: red;
width: 100%;
height: 5em;
z-index: 2;
}
#right-menu {
position: fixed;
float: right;
right: 0px;
top: 5em;
background-color: cyan;
width: 10em;
height: calc(100% - 5em);
}
#container {
position: relative;
top: 0em;
left: 0em;
width: calc(100% - 10em);
height: calc(100% - 0em);
z-index: -1;
}
#container p {
z-index: -1;
}
.menu-item {
position: relative;
height: 5em;
line-height: 5em;
width: 100%;
background-color: yellow;
text-align: left;
cursor: pointer;
padding: 0 0 0 1.5em;
margin: 0 0 1.5em 0;
border: solid red 1px;
z-index: 10 !important;
}
.menu-item:first-of-type {
margin-top: 1em;
}
.menu-item:hover {
background-color: green;
position: relative;
left: -2em;
z-index: 10 !important;
}
.menu-item span {
display: inline-block;
vertical-align: middle;
line-height: normal;
z-index: 10 !important;
}
.custompadding {
position: relative;
text-align: right;
right: 1em;
width: 100%;
padding-top: 6rem;
margin-top: 0em;
}
.custompadding:first-of-type {
padding-top: 7rem;
}
<div id="top-menu">
Rolf Vidar Hoksaas
</div>
<div id="right-menu">
<div class="menu-item" onclick="location.href='#header-contactdetails'"><span>Contact Details</span></div>
<div class="menu-item" onclick="location.href='#header-personalinfo'"><span>Personal information</span></div>
</div>
<div id="container">
<h1 id="header-contactdetails" class="custompadding"> Heading 1 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Donec ac odio tempor orci dapibus ultrices in. Nec ullamcorper
sit amet risus. In aliquam sem fringilla ut. Orci phasellus egestas tellus rutrum tellus. Cras adipiscing enim eu turpis egestas pretium aenean. Amet cursus sit amet dictum sit amet justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh.
Donec enim diam vulputate ut pharetra sit amet aliquam id. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Etiam erat velit scelerisque in dictum non consectetur a. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec.
Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Mattis enim ut tellus elementum sagittis vitae et leo. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Fames ac turpis egestas integer eget aliquet. Egestas erat imperdiet
sed euismod nisi porta lorem mollis. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi. Quam elementum pulvinar etiam non quam lacus. Viverra adipiscing
at in tellus integer feugiat. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Enim sed faucibus turpis in eu mi. Iaculis at erat pellentesque adipiscing
commodo. Sed vulputate mi sit amet. Scelerisque eu ultrices vitae auctor eu augue ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Lorem ipsum dolor sit amet consectetur
adipiscing elit pellentesque habitant. Interdum velit laoreet id donec ultrices tincidunt. Egestas tellus rutrum tellus pellentesque. Cras adipiscing enim eu turpis egestas. Imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque
volutpat ac tincidunt. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Nulla facilisi cras fermentum odio eu feugiat pretium. Amet commodo nulla facilisi
nullam vehicula ipsum. Sed felis eget velit aliquet sagittis id consectetur purus ut. Vitae auctor eu augue ut lectus. Etiam erat velit scelerisque in. Leo integer malesuada nunc vel. Suspendisse interdum consectetur libero id faucibus nisl. Sollicitudin
nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Etiam tempor orci eu lobortis.
Egestas dui id ornare arcu odio. Dolor magna eget est lorem ipsum. Facilisis gravida neque convallis a cras semper. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida
in fermentum et sollicitudin ac orci phasellus. Fermentum dui faucibus in ornare quam viverra. Tristique sollicitudin nibh sit amet commodo. Nunc lobortis mattis aliquam faucibus purus. In mollis nunc sed id semper risus. Sit amet consectetur adipiscing
elit duis. Luctus accumsan tortor posuere ac. Sed id semper risus in hendrerit gravida. Massa tempor nec feugiat nisl. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed viverra tellus in hac habitasse platea. Amet porttitor eget
dolor morbi. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tempus iaculis urna id volutpat lacus. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Felis donec et odio pellentesque diam volutpat commodo. Turpis tincidunt
id aliquet risus feugiat in ante metus dictum. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Nisi scelerisque eu ultrices vitae auctor eu augue. Donec et odio pellentesque diam volutpat commodo sed. Sed euismod nisi porta
lorem. Eleifend quam adipiscing vitae proin sagittis.</p>
<h1 id="header-personalinfo" class="custompadding"> Heading 2 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Donec ac odio tempor orci dapibus ultrices in. Nec ullamcorper
sit amet risus. In aliquam sem fringilla ut. Orci phasellus egestas tellus rutrum tellus. Cras adipiscing enim eu turpis egestas pretium aenean. Amet cursus sit amet dictum sit amet justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh.
Donec enim diam vulputate ut pharetra sit amet aliquam id. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Etiam erat velit scelerisque in dictum non consectetur a. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec.
Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Mattis enim ut tellus elementum sagittis vitae et leo. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Fames ac turpis egestas integer eget aliquet. Egestas erat imperdiet
sed euismod nisi porta lorem mollis. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi. Quam elementum pulvinar etiam non quam lacus. Viverra adipiscing
at in tellus integer feugiat. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Enim sed faucibus turpis in eu mi. Iaculis at erat pellentesque adipiscing
commodo. Sed vulputate mi sit amet. Scelerisque eu ultrices vitae auctor eu augue ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Lorem ipsum dolor sit amet consectetur
adipiscing elit pellentesque habitant. Interdum velit laoreet id donec ultrices tincidunt. Egestas tellus rutrum tellus pellentesque. Cras adipiscing enim eu turpis egestas. Imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque
volutpat ac tincidunt. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Nulla facilisi cras fermentum odio eu feugiat pretium. Amet commodo nulla facilisi
nullam vehicula ipsum. Sed felis eget velit aliquet sagittis id consectetur purus ut. Vitae auctor eu augue ut lectus. Etiam erat velit scelerisque in. Leo integer malesuada nunc vel. Suspendisse interdum consectetur libero id faucibus nisl. Sollicitudin
nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Etiam tempor orci eu lobortis.
Egestas dui id ornare arcu odio. Dolor magna eget est lorem ipsum. Facilisis gravida neque convallis a cras semper. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida
in fermentum et sollicitudin ac orci phasellus. Fermentum dui faucibus in ornare quam viverra. Tristique sollicitudin nibh sit amet commodo. Nunc lobortis mattis aliquam faucibus purus. In mollis nunc sed id semper risus. Sit amet consectetur adipiscing
elit duis. Luctus accumsan tortor posuere ac. Sed id semper risus in hendrerit gravida. Massa tempor nec feugiat nisl. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed viverra tellus in hac habitasse platea. Amet porttitor eget
dolor morbi. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tempus iaculis urna id volutpat lacus. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Felis donec et odio pellentesque diam volutpat commodo. Turpis tincidunt
id aliquet risus feugiat in ante metus dictum. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Nisi scelerisque eu ultrices vitae auctor eu augue. Donec et odio pellentesque diam volutpat commodo sed. Sed euismod nisi porta
lorem. Eleifend quam adipiscing vitae proin sagittis.</p>
</div>
免责声明
我理解，假设这可以很容易地用 JavaScript 解决，但我宁愿在找到另一个解决方案之前了解发生了什么。另外，使用 CSS 来完成视觉任务似乎更干净，因为我将使用它作为一个组合。
To better see what is happening, add a background to the body element while setting negative z-index to your content and you will see that your text is hidden behind. 1
html,
body {
border: 0;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
background:blue;
}
#top-menu {
position: fixed;
top: 0px;
background-color: red;
width: 100%;
height: 5em;
z-index: 2;
}
#right-menu {
position: fixed;
float: right;
right: 0px;
top: 5em;
background-color: cyan;
width: 10em;
height: calc(100% - 5em);
}
#container {
position: relative;
top: 0em;
left: 0em;
width: calc(100% - 10em);
height: calc(100% - 0em);
z-index: -1;
}
#container p {
z-index: -1;
}
.menu-item {
position: relative;
height: 5em;
line-height: 5em;
width: 100%;
background-color: yellow;
text-align: left;
cursor: pointer;
padding: 0 0 0 1.5em;
margin: 0 0 1.5em 0;
border: solid red 1px;
z-index: 10 !important;
}
.menu-item:first-of-type {
margin-top: 1em;
}
.menu-item:hover {
background-color: green;
position: relative;
left: -2em;
z-index: 10 !important;
}
.menu-item span {
display: inline-block;
vertical-align: middle;
line-height: normal;
z-index: 10 !important;
}
.custompadding {
position: relative;
text-align: right;
right: 1em;
width: 100%;
padding-top: 6rem;
margin-top: 0em;
}
.custompadding:first-of-type {
padding-top: 7rem;
}
<div id="top-menu">
Rolf Vidar Hoksaas
</div>
<div id="right-menu">
<div class="menu-item" onclick="location.href='#header-contactdetails'"><span>Contact Details</span></div>
<div class="menu-item" onclick="location.href='#header-personalinfo'"><span>Personal information</span></div>
</div>
<div id="container">
<h1 id="header-contactdetails" class="custompadding"> Heading 1 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Donec ac odio tempor orci dapibus ultrices in. Nec ullamcorper
sit amet risus. In aliquam sem fringilla ut. Orci phasellus egestas tellus rutrum tellus. Cras adipiscing enim eu turpis egestas pretium aenean. Amet cursus sit amet dictum sit amet justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh.
Donec enim diam vulputate ut pharetra sit amet aliquam id. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Etiam erat velit scelerisque in dictum non consectetur a. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec.
Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Mattis enim ut tellus elementum sagittis vitae et leo. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Fames ac turpis egestas integer eget aliquet. Egestas erat imperdiet
sed euismod nisi porta lorem mollis. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi. Quam elementum pulvinar etiam non quam lacus. Viverra adipiscing
at in tellus integer feugiat. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Enim sed faucibus turpis in eu mi. Iaculis at erat pellentesque adipiscing
commodo. Sed vulputate mi sit amet. Scelerisque eu ultrices vitae auctor eu augue ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Lorem ipsum dolor sit amet consectetur
adipiscing elit pellentesque habitant. Interdum velit laoreet id donec ultrices tincidunt. Egestas tellus rutrum tellus pellentesque. Cras adipiscing enim eu turpis egestas. Imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque
volutpat ac tincidunt. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Nulla facilisi cras fermentum odio eu feugiat pretium. Amet commodo nulla facilisi
nullam vehicula ipsum. Sed felis eget velit aliquet sagittis id consectetur purus ut. Vitae auctor eu augue ut lectus. Etiam erat velit scelerisque in. Leo integer malesuada nunc vel. Suspendisse interdum consectetur libero id faucibus nisl. Sollicitudin
nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Etiam tempor orci eu lobortis.
Egestas dui id ornare arcu odio. Dolor magna eget est lorem ipsum. Facilisis gravida neque convallis a cras semper. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida
in fermentum et sollicitudin ac orci phasellus. Fermentum dui faucibus in ornare quam viverra. Tristique sollicitudin nibh sit amet commodo. Nunc lobortis mattis aliquam faucibus purus. In mollis nunc sed id semper risus. Sit amet consectetur adipiscing
elit duis. Luctus accumsan tortor posuere ac. Sed id semper risus in hendrerit gravida. Massa tempor nec feugiat nisl. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed viverra tellus in hac habitasse platea. Amet porttitor eget
dolor morbi. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tempus iaculis urna id volutpat lacus. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Felis donec et odio pellentesque diam volutpat commodo. Turpis tincidunt
id aliquet risus feugiat in ante metus dictum. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Nisi scelerisque eu ultrices vitae auctor eu augue. Donec et odio pellentesque diam volutpat commodo sed. Sed euismod nisi porta
lorem. Eleifend quam adipiscing vitae proin sagittis.</p>
<h1 id="header-personalinfo" class="custompadding"> Heading 2 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Donec ac odio tempor orci dapibus ultrices in. Nec ullamcorper
sit amet risus. In aliquam sem fringilla ut. Orci phasellus egestas tellus rutrum tellus. Cras adipiscing enim eu turpis egestas pretium aenean. Amet cursus sit amet dictum sit amet justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh.
Donec enim diam vulputate ut pharetra sit amet aliquam id. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Etiam erat velit scelerisque in dictum non consectetur a. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec.
Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Mattis enim ut tellus elementum sagittis vitae et leo. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Fames ac turpis egestas integer eget aliquet. Egestas erat imperdiet
sed euismod nisi porta lorem mollis. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi. Quam elementum pulvinar etiam non quam lacus. Viverra adipiscing
at in tellus integer feugiat. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Enim sed faucibus turpis in eu mi. Iaculis at erat pellentesque adipiscing
commodo. Sed vulputate mi sit amet. Scelerisque eu ultrices vitae auctor eu augue ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Lorem ipsum dolor sit amet consectetur
adipiscing elit pellentesque habitant. Interdum velit laoreet id donec ultrices tincidunt. Egestas tellus rutrum tellus pellentesque. Cras adipiscing enim eu turpis egestas. Imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque
volutpat ac tincidunt. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Nulla facilisi cras fermentum odio eu feugiat pretium. Amet commodo nulla facilisi
nullam vehicula ipsum. Sed felis eget velit aliquet sagittis id consectetur purus ut. Vitae auctor eu augue ut lectus. Etiam erat velit scelerisque in. Leo integer malesuada nunc vel. Suspendisse interdum consectetur libero id faucibus nisl. Sollicitudin
nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Etiam tempor orci eu lobortis.
Egestas dui id ornare arcu odio. Dolor magna eget est lorem ipsum. Facilisis gravida neque convallis a cras semper. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida
in fermentum et sollicitudin ac orci phasellus. Fermentum dui faucibus in ornare quam viverra. Tristique sollicitudin nibh sit amet commodo. Nunc lobortis mattis aliquam faucibus purus. In mollis nunc sed id semper risus. Sit amet consectetur adipiscing
elit duis. Luctus accumsan tortor posuere ac. Sed id semper risus in hendrerit gravida. Massa tempor nec feugiat nisl. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed viverra tellus in hac habitasse platea. Amet porttitor eget
dolor morbi. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tempus iaculis urna id volutpat lacus. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Felis donec et odio pellentesque diam volutpat commodo. Turpis tincidunt
id aliquet risus feugiat in ante metus dictum. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Nisi scelerisque eu ultrices vitae auctor eu augue. Donec et odio pellentesque diam volutpat commodo sed. Sed euismod nisi porta
lorem. Eleifend quam adipiscing vitae proin sagittis.</p>
</div>
您可以增加z-index右侧菜单的：
html,
body {
border: 0;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
background:blue;
}
#top-menu {
position: fixed;
top: 0px;
background-color: red;
width: 100%;
height: 5em;
z-index: 2;
}
#right-menu {
position: fixed;
float: right;
right: 0px;
top: 5em;
background-color: cyan;
width: 10em;
height: calc(100% - 5em);
z-index:1;
}
#container {
position: relative;
top: 0em;
left: 0em;
width: calc(100% - 10em);
height: calc(100% - 0em);
z-index: 0;
}
#container p {
z-index: -1;
}
.menu-item {
position: relative;
height: 5em;
line-height: 5em;
width: 100%;
background-color: yellow;
text-align: left;
cursor: pointer;
padding: 0 0 0 1.5em;
margin: 0 0 1.5em 0;
border: solid red 1px;
z-index: 10 !important;
}
.menu-item:first-of-type {
margin-top: 1em;
}
.menu-item:hover {
background-color: green;
position: relative;
left: -2em;
z-index: 10 !important;
}
.menu-item span {
display: inline-block;
vertical-align: middle;
line-height: normal;
z-index: 10 !important;
}
.custompadding {
position: relative;
text-align: right;
right: 1em;
width: 100%;
padding-top: 6rem;
margin-top: 0em;
}
.custompadding:first-of-type {
padding-top: 7rem;
}
<div id="top-menu">
Rolf Vidar Hoksaas
</div>
<div id="right-menu">
<div class="menu-item" onclick="location.href='#header-contactdetails'"><span>Contact Details</span></div>
<div class="menu-item" onclick="location.href='#header-personalinfo'"><span>Personal information</span></div>
</div>
<div id="container">
<h1 id="header-contactdetails" class="custompadding"> Heading 1 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Donec ac odio tempor orci dapibus ultrices in. Nec ullamcorper
Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Mattis enim ut tellus elementum sagittis vitae et leo. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Fames ac turpis egestas integer eget aliquet. Egestas erat imperdiet
sed euismod nisi porta lorem mollis. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi. Quam elementum pulvinar etiam non quam lacus. Viverra adipiscing
at in tellus integer feugiat. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Enim sed faucibus turpis in eu mi. Iaculis at erat pellentesque adipiscing
commodo. Sed vulputate mi sit amet. Scelerisque eu ultrices vitae auctor eu augue ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Lorem ipsum dolor sit amet consectetur
adipiscing elit pellentesque habitant. Interdum velit laoreet id donec ultrices tincidunt. Egestas tellus rutrum tellus pellentesque. Cras adipiscing enim eu turpis egestas. Imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque
volutpat ac tincidunt. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Nulla facilisi cras fermentum odio eu feugiat pretium. Amet commodo nulla facilisi
nullam vehicula ipsum. Sed felis eget velit aliquet sagittis id consectetur purus ut. Vitae auctor eu augue ut lectus. Etiam erat velit scelerisque in. Leo integer malesuada nunc vel. Suspendisse interdum consectetur libero id faucibus nisl. Sollicitudin
nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Etiam tempor orci eu lobortis.
Egestas dui id ornare arcu odio. Dolor magna eget est lorem ipsum. Facilisis gravida neque convallis a cras semper. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida
in fermentum et sollicitudin ac orci phasellus. Fermentum dui faucibus in ornare quam viverra. Tristique sollicitudin nibh sit amet commodo. Nunc lobortis mattis aliquam faucibus purus. In mollis nunc sed id semper risus. Sit amet consectetur adipiscing
elit duis. Luctus accumsan tortor posuere ac. Sed id semper risus in hendrerit gravida. Massa tempor nec feugiat nisl. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed viverra tellus in hac habitasse platea. Amet porttitor eget
dolor morbi. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tempus iaculis urna id volutpat lacus. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Felis donec et odio pellentesque diam volutpat commodo. Turpis tincidunt
id aliquet risus feugiat in ante metus dictum. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Nisi scelerisque eu ultrices vitae auctor eu augue. Donec et odio pellentesque diam volutpat commodo sed. Sed euismod nisi porta
lorem. Eleifend quam adipiscing vitae proin sagittis.</p>
<h1 id="header-personalinfo" class="custompadding"> Heading 2 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Donec ac odio tempor orci dapibus ultrices in. Nec ullamcorper
sit amet risus. In aliquam sem fringilla ut. Orci phasellus egestas tellus rutrum tellus. Cras adipiscing enim eu turpis egestas pretium aenean. Amet cursus sit amet dictum sit amet justo. Nulla facilisi cras fermentum odio eu feugiat pretium nibh.
Donec enim diam vulputate ut pharetra sit amet aliquam id. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Etiam erat velit scelerisque in dictum non consectetur a. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec.
Nunc consequat interdum varius sit amet mattis vulputate enim nulla. Mattis enim ut tellus elementum sagittis vitae et leo. Cras tincidunt lobortis feugiat vivamus at augue eget arcu. Fames ac turpis egestas integer eget aliquet. Egestas erat imperdiet
sed euismod nisi porta lorem mollis. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi. Quam elementum pulvinar etiam non quam lacus. Viverra adipiscing
at in tellus integer feugiat. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Enim sed faucibus turpis in eu mi. Iaculis at erat pellentesque adipiscing
commodo. Sed vulputate mi sit amet. Scelerisque eu ultrices vitae auctor eu augue ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Lorem ipsum dolor sit amet consectetur
adipiscing elit pellentesque habitant. Interdum velit laoreet id donec ultrices tincidunt. Egestas tellus rutrum tellus pellentesque. Cras adipiscing enim eu turpis egestas. Imperdiet proin fermentum leo vel orci. Pulvinar elementum integer enim neque
volutpat ac tincidunt. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Nulla facilisi cras fermentum odio eu feugiat pretium. Amet commodo nulla facilisi
nullam vehicula ipsum. Sed felis eget velit aliquet sagittis id consectetur purus ut. Vitae auctor eu augue ut lectus. Etiam erat velit scelerisque in. Leo integer malesuada nunc vel. Suspendisse interdum consectetur libero id faucibus nisl. Sollicitudin
nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Integer eget aliquet nibh praesent tristique. Eget nullam non nisi est. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Etiam tempor orci eu lobortis.
Egestas dui id ornare arcu odio. Dolor magna eget est lorem ipsum. Facilisis gravida neque convallis a cras semper. Elit ullamcorper dignissim cras tincidunt lobortis feugiat. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida
in fermentum et sollicitudin ac orci phasellus. Fermentum dui faucibus in ornare quam viverra. Tristique sollicitudin nibh sit amet commodo. Nunc lobortis mattis aliquam faucibus purus. In mollis nunc sed id semper risus. Sit amet consectetur adipiscing
elit duis. Luctus accumsan tortor posuere ac. Sed id semper risus in hendrerit gravida. Massa tempor nec feugiat nisl. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Sed viverra tellus in hac habitasse platea. Amet porttitor eget
dolor morbi. Sed sed risus pretium quam vulputate dignissim suspendisse in. Tempus iaculis urna id volutpat lacus. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Felis donec et odio pellentesque diam volutpat commodo. Turpis tincidunt
id aliquet risus feugiat in ante metus dictum. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Nisi scelerisque eu ultrices vitae auctor eu augue. Donec et odio pellentesque diam volutpat commodo sed. Sed euismod nisi porta
lorem. Eleifend quam adipiscing vitae proin sagittis.</p>
</div>
如果您参考MDN https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context你可以看到：
在以下场景中，文档中任何位置的任何元素都可以形成堆叠上下文：
- 文档的根元素 ()。
- 位置值绝对或相对且 z 索引值非 auto 的元素。
- 元素带有位置值固定或粘性（粘性适用于所有移动浏览器，但不适用于较旧的桌面浏览器）。
- ...
Your fixed元素正在创建一个堆叠上下文，因此所有z-index应用于内部永远不会被外部看到，这就是为什么你的z-index:10在某种程度上是无用的。只有z-index应用于容器和菜单将会产生影响，如果没有z-indexDOM 顺序将决定（请注意，您的容器放置在after菜单）
1在这种情况下，主体不是定位元素，容器是具有负值的定位元素z-index因此主体不会创建堆叠上下文（如果我们参考上面的规则）。这意味着容器的放置将考虑上层堆叠上下文（这将是根元素），并且逻辑上body也将被放置在相同的堆栈上下文中。现在绘画顺序 https://www.w3.org/TR/CSS2/zindex.html首先会画负片z-indexelements（我们的容器属于这里）然后是 autoz-index (our body属于这里）然后是积极的z-index元素。
如果你想保留负数z-index在容器上，只需使用以下命令创建一个堆栈上下文body
html,
body {
border: 0;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
scroll-behavior: smooth;
background:blue;
}
body {
position:relative;
z-index:0;
}
#top-menu {
position: fixed;
top: 0px;
background-color: red;
width: 100%;
height: 5em;
z-index: 2;
}
#right-menu {
position: fixed;
float: right;
right: 0px;
top: 5em;
background-color: cyan;
width: 10em;
height: calc(100% - 5em);
}
#container {
position: relative;
top: 0em;
left: 0em;
width: calc(100% - 10em);
height: calc(100% - 0em);
z-index: -1;
}
#container p {
z-index: -1;
}
.menu-item {
position: relative;
height: 5em;
line-height: 5em;
width: 100%;
background-color: yellow;
text-align: left;
cursor: pointer;
padding: 0 0 0 1.5em;
margin: 0 0 1.5em 0;
border: solid red 1px;
z-index: 10 !important;
}
.menu-item:first-of-type {
margin-top: 1em;
}
.menu-item:hover {
background-color: green;
position: relative;
left: -2em;
z-index: 10 !important;
}
.menu-item span {
display: inline-block;
vertical-align: middle;
line-height: normal;
z-index: 10 !important;
}
.custompadding {
position: relative;
text-align: right;
right: 1em;
width: 100%;
padding-top: 6rem;
margin-top: 0em;
}
.custompadding:first-of-type {
padding-top: 7rem;
}
<div id="top-menu">
Rolf Vidar Hoksaas
</div>
<div id="right-menu">
<div class="menu-item" onclick="location.href='#header-contactdetails'"><span>Contact Details</span></div>
<div class="menu-item" onclick="location.href='#header-personalinfo'"><span>Personal information</span></div>
</div>
<div id="container">
<h1 id="header-contactdetails" class="custompadding"> Heading 1 </h1>
<p>
commodo. Sed vulputate mi sit amet. Scelerisque eu ultrices vitae auctor eu augue ut. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Lorem ipsum dolor sit
lorem. Eleifend quam adipiscing vitae proin sagittis.</p>
<h1 id="header-personalinfo" class="custompadding"> Heading 2 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incid</p>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
