How to z-index a repositioned div in css - html

Question

Context:
I'm trying to make menu items that are visibly focused, changing colour and expanding in size when hovered by the mouse. While setting another colour is easy enough, trying to move it sideways is a more complex task than I had thought. The movement itself works as it should, but the z-index of the item gets messed up.
Issue:
The background colour is set as it should, but the text which is theoretically behind the div element is still visible over the menu. Both the text container which is supposed to stay behind the menu, and the menu items (and their parents) are relatively positioned, so according to the rules I have read, it should work.
Fallback...? solution:
Nevertheless, it seems setting the text container z-index to -1 covers this issue, but gives me another: the cursor won't then detect the text it's hovering, leaving the user with the default cursor over text. When scrolling, outside of the initial viewport, the mouse works as expected.
I have here included video demos of each issue:
https://vimeo.com/user94860029/review/316054562/95dd13f82e [Z-index of 0 or positive on text, and 10 on menu item]
https://vimeo.com/user94860029/review/316054577/114ab82823 [Negative Z-index on text container, and 10 on menu item]
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>
Disclaimer
I understand, assuming, this could easily be resolved with JavaScript, but I'd rather understand what is going on before finding another solution. Also, using CSS for visual tasks seems cleaner, as I will use this as a portfolio.

Answer 1

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>
Instead of doing so, you can increase the z-index of the right menu:
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>
If you refer to the MDN you can see:
A stacking context is formed, anywhere in the document, by any element in the following scenarios:
Root element of the document ().
Element with a position value absolute or relative and z-index value other than auto.
Element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop).
...
Your fixed element is creating a stacking context thus all the z-index applied inside will never be seen outside that's why your z-index:10 is somehow useless. Only the z-index applied to the container and the menu will make the difference and if no z-index the DOM order will decide (note that your container is placed after the menu)
1 In this case, body is not a positionned element and a container is a positionned element having a negative z-index so the body will not create a stacking context (if we refer to the rules above). This means that the container will be placed considering an upper stacking context (which will be the root element) and logically the body will also be placed on that same stacking context. Now the painting order will first paint the negative z-index elements (our container belong here) then the auto z-index (our bodybelong here) then the positive z-index elements.
If you want to keep the negative z-index on the container, simply create a stacking context with the 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>