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,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,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,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,则可以看到：

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).
• …

您的固定元素正在创建一个堆栈上下文,因此内部永远不会看到应用在内部的所有z-index,这就是为什么z-index：10毫无用处的原因.只有应用于容器和菜单的z-index会有所不同,如果没有z-index,则DOM顺序将决定(请注意,您的容器位于菜单之后)

1在这种情况下,body不是定位元素,而容器是z索引为负的定位元素,因此body将不会创建堆叠上下文(如果我们参考上述规则).这意味着将在考虑上层堆叠上下文(它将是根元素)的情况下放置容器,并且在逻辑上,主体也将放置在相同的堆叠上下文上.现在painting order将首先绘制负z-index元素(我们的容器在这里),然后绘制自动z-index(我们的身体在这里),然后绘制正z-index元素.

如果要将负z-index保留在容器上,只需使用主体创建一个堆栈上下文

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,sed do eiusmod tempor incid</p>
</div>