html-如何在CSS中为重新定位的div编制索引

概述内容：我正在尝试使菜单项明显地集中在鼠标悬停时改变其颜色并扩大其大小.虽然设置另一种颜色很容易,但是尝试将其横向移动是比我想象的还要复杂的任务.运动本身可以正常工作,但是项目的z-index混乱了.问题：设置了背景色,但理论上在div元素后面的文本仍在菜单上可见.应该放在菜单后面的文本容器和菜单项(及其父项)都相对放置,因此根据我阅读的规则,它应该可以工作.

内容：

我正在尝试使菜单项明显地集中在鼠标悬停时改变其颜色并扩大其大小.虽然设置另一种颜色很容易,但是尝试将其横向移动是比我想象的还要复杂的任务.运动本身可以正常工作,但是项目的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  onclick="location.href='#header-contactdetails'"><span>Contact Details</span></div>  <div  onclick="location.href='#header-personalinfo'"><span>Personal information</span></div></div><div ID="container">  <h1 ID="header-contactdetails" > 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" > 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>

 免责声明

我理解,假设可以使用JavaScript轻松解决此问题,但是在找到其他解决方案之前,我宁愿了解发生了什么.另外,将CSS用于可视任务似乎更加简洁,因为我将其用作组合.

最佳答案为了更好地了解正在发生的情况,请在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  onclick="location.href='#header-contactdetails'"><span>Contact Details</span></div>  <div  onclick="location.href='#header-personalinfo'"><span>Personal information</span></div></div><div ID="container">  <h1 ID="header-contactdetails" > 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  onclick="location.href='#header-contactdetails'"><span>Contact Details</span></div>  <div  onclick="location.href='#header-personalinfo'"><span>Personal information</span></div></div><div ID="container">  <h1 ID="header-contactdetails" > 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" > 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  onclick="location.href='#header-contactdetails'"><span>Contact Details</span></div>  <div  onclick="location.href='#header-personalinfo'"><span>Personal information</span></div></div><div ID="container">  <h1 ID="header-contactdetails" > 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" > heading 2 </h1>  <p>Lorem ipsum dolor sit amet,sed do eiusmod tempor incID</p></div>

总结

以上是内存溢出为你收集整理的html-如何在CSS中为重新定位的div编制索引 全部内容，希望文章能够帮你解决html-如何在CSS中为重新定位的div编制索引 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。