3

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
mazunki
  • 682
  • 5
  • 17
  • Regardless of `position:fixed`, the DOM structure is maintained. In order to make an element render in front of another, you need to make the `z-index` change at the level of their corresponding siblings, children of their closest common ancestor. Note `z-index` only applies on positioned elements. – tao Feb 08 '19 at 09:11
  • I tried changing the `:hover` `z-index` to 2, keeping the `default` (unhovered) `z-index` at 1, which is what I understood from what you said, but the text is still visible over the menu. What do you mean with `position: fixed`? Now that I think about it, maybe that's related to the issue, due to inheritance of position, or something...? I, nevertheless, have set the position to relative, so it shouldn't be inherited anyhow. – mazunki Feb 08 '19 at 09:17
  • TL:DR: you want the text to behind the menu or above? – Temani Afif Feb 08 '19 at 09:22
  • I want the text to be hidden behind the menu item when it's hovered. I want the menus to always stay on top. @TemaniAfif – mazunki Feb 08 '19 at 09:23
  • @mazunki, here's something to understand `z-index`: https://jsfiddle.net/websiter/tsuevt5a/ Clicking elements toggles their z-index value between `1`, `-1` and `auto`. Based on checkbox, all the others are reset to `auto` or not. – tao Feb 08 '19 at 17:51

1 Answers1

2

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>
Community
  • 1
  • 1
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Setting the `right-menu` divisor to `z-index:1`, and `container` and `container p` to `z-index: 0` solves the issue. Your first example, setting `container` and `container p` to -1 with a blue background was a nice, unexpected, explanation. I thought something like that was what happening to negative z-index. Using negative z-indexes actually put stuff BEHIND the default viewport, which I haven't seen documented anywhere. – mazunki Feb 08 '19 at 09:38
  • @mazunki not behind the viewport but behind the body element .. will add more explanation – Temani Afif Feb 08 '19 at 09:40
  • Does that MDN ruleset of z-index regarding CSS only apply to Mozilla browsers? – mazunki Feb 08 '19 at 09:40
  • 1
    @mazunki no it apply to all the browser .. the link is simply a Mozilla link, I didn't use the Spec because I thought this one is easier to understand – Temani Afif Feb 08 '19 at 09:41
  • It is definitely easy to understand where the issue was now. Thanks. – mazunki Feb 08 '19 at 09:42
  • @mazunki I added more details – Temani Afif Feb 08 '19 at 09:53