我正在尝试使菜单项具有明显的焦点，在将鼠标悬停时会更改颜色并扩大其大小。虽然设置另一种颜色很容易，但是尝试将其横向移动是比我想象的还要复杂的任务。该运动本身可以正常工作，但是该项目的z-index混乱了。
背景色设置为应有的设置，但是在菜单上仍可以看到理论上位于div元素后面的文本。应该保留在菜单后面的文本容器和菜单项（及其父项）都相对放置，因此根据我阅读的规则，它应该可以工作。
尽管如此，将文本容器的z-index设置为-1似乎可以解决此问题，但给我带来了另一个问题：光标然后将不会检测到它悬停的文本，而用户将默认光标停留在文本上。滚动时，在初始视口之外，鼠标将按预期工作。
https://vimeo.com/user94860029/review/316054562/95dd13f82e [Z索引在文本上为0或正，在菜单项上为10]
https://vimeo.com/user94860029/review/316054577/114ab82823 [文本容器上的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用于可视任务似乎更简洁，因为我将其用作组合。
答案 0 :(得分：2)
要更好地了解正在发生的情况，请在body元素上添加背景，同时为内容设置负数z-index，您会看到文本隐藏在后面。 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，则可以看到：
在以下情况下，堆叠上下文由文档中的任何元素在文档中的任何位置形成：
- 文档（）的根元素。
- 具有绝对或相对位置值和z索引值（不是auto）的元素。
- 具有固定位置值或粘性（对于所有移动浏览器，但对于较旧的台式机而言，粘性）的元素。
- ...
您的fixed元素正在创建一个堆栈上下文，因此内部永远不会看到应用在内部的所有z-index，这就是您的z-index:10毫无用处的原因。仅将z-index应用于容器和菜单会有所不同，如果没有z-index，则DOM顺序将决定（请注意，您的容器位于菜单的 之后）< / p>
1 在这种情况下，body不是定位元素，而容器是具有负z-index的定位元素，因此body不会创建堆叠上下文（如果我们引用以上规则）。这意味着将在考虑上层堆叠上下文（它将是根元素）的情况下放置容器，并且在逻辑上，body也将放置在同一堆叠上下文上。现在painting order将首先绘制负z-index元素（我们的容器属于此处），然后绘制自动z-index（我们的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>