9999 的 z-index 不适用于绝对 div
z-index of 9999 not working on absolute div
.mainContentRightForm 上的 z-index 不工作。它应该漂浮在橙色条上方，但它位于它后面。我只是不明白为什么，可以使用一些专业知识。
#container {
width: 100%;
margin: auto;
}
.content-wrapper {
margin: auto;
max-width: 1040px;
overflow: hidden;
padding: 38px 50px 50px;
position: relative;
}
/* landing page masthead */
#mastheadBar {
max-width: 100%;
background-color: #FDA929;
}
#mastheadImage {
max-width: 1520px;
background-image: url(#);
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: scroll;
margin: auto;
}
.logoWrapper {
max-width: 310px;
margin-bottom: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 23px;
color: #FFF;
vertical-align: middle;
display: table;
}
.LogoWrapperText {
display: table-cell;
vertical-align: middle;
padding-left: 21px;
}
h1 {
font-size: 50px;
font-weight: 700;
line-height: 54px;
color: #FFF;
max-width: 745px;
margin-top: -14px;
margin-bottom: 23px;
}
/* landing page main content */
#mainContent {
background-color: #fff;
overflow: hidden;
}
#mainContent p {
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #737373;
padding-top: 12px;
}
#mainContent li {
color: #737373;
font-size: 18px;
font-weight: 400;
line-height: 24px;
list-style-position: outside;
margin: 0 0 8px 10px;
}
#mainContent ul {
list-style-position: inside;
list-style-type: disc;
padding-top: 32px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
#mainContentLeft {
float: left;
width: 57.4468085106383%;
margin-top: -5px;
}
#mainContentLeftWrap {
margin-bottom: 11px;
}
#mainContentRightForm {
background: white;
padding: 24px;
position: absolute;
width: 340px;
z-index: 9999;
border: thin solid #F00;
right: 50px;
top: -154px;
}
<div id="container">
<div id="mastheadBar">
<div id="mastheadImage">
<div class="content-wrapper">
<div class="logoWrapper">
<div class="LogoWrapperText">${logo-text}</div>
</div>
<h1>${page-title}</h1>
</div>
</div>
</div>
<div id="mainContent">
<div class="content-wrapper">
<div id="mainContentLeft">
<div id="mainContentLeftWrap" class="mktoText" mktoName="Main Body
Text">
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
</div>
</div>
<div id="mainContentRightForm">Please fill in the form below.Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia,
turpis ac hendrerit dictum, erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.
</p>
</div>
</div>
</div>
在子元素 (#mainContentRightForm) 上设置 z-index 不会将其叠加在其父元素 (#mainContent) 兄弟元素 (#mastheadBar) 之上，因为#mainContent 需要 z-index.
在这种情况下，您不需要 z-index，因为 .content-wrapper 和 #mainContent 上的 overflow: hidden 阻止了 #mainContentRightForm显示未切割。
#container {
width: 100%;
margin: auto;
}
.content-wrapper {
margin: auto;
max-width: 1040px;
overflow: hidden;
padding: 38px 50px 50px;
position: relative;
}
/* landing page masthead */
#mastheadBar {
max-width: 100%;
background-color: #FDA929;
}
#mastheadImage {
max-width: 1520px;
background-image: url(#);
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: scroll;
margin: auto;
}
.logoWrapper {
max-width: 310px;
margin-bottom: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 23px;
color: #FFF;
vertical-align: middle;
display: table;
}
.LogoWrapperText {
display: table-cell;
vertical-align: middle;
padding-left: 21px;
}
h1 {
font-size: 50px;
font-weight: 700;
line-height: 54px;
color: #FFF;
max-width: 745px;
margin-top: -14px;
margin-bottom: 23px;
}
/* landing page main content */
#mainContent {
background-color: #fff;
overflow: hidden;
}
#mainContent p {
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #737373;
padding-top: 12px;
}
#mainContent li {
color: #737373;
font-size: 18px;
font-weight: 400;
line-height: 24px;
list-style-position: outside;
margin: 0 0 8px 10px;
}
#mainContent ul {
list-style-position: inside;
list-style-type: disc;
padding-top: 32px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
#mainContentLeft {
float: left;
width: 57.4468085106383%;
margin-top: -5px;
}
#mainContentLeftWrap {
margin-bottom: 11px;
}
#mainContentRightForm {
background: white;
padding: 24px;
position: absolute;
width: 340px;
z-index: 9999;
border: thin solid #F00;
right: 50px;
top: -154px;
}
<div id="container">
<div id="mastheadBar">
<div id="mastheadImage">
<div class="content-wrapper">
<div class="logoWrapper">
<div class="LogoWrapperText">${logo-text}</div>
</div>
<h1>${page-title}</h1>
</div>
</div>
</div>
<div id="mainContent">
<div class="content-wrapper">
<div id="mainContentLeft">
<div id="mainContentLeftWrap" class="mktoText" mktoName="Main Body
Text">
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
</div>
</div>
<div id="mainContentRightForm">Please fill in the form below.Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia,
turpis ac hendrerit dictum, erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.
</p>
</div>
</div>
</div>
.mainContentRightForm 上的 z-index 不工作。它应该漂浮在橙色条上方，但它位于它后面。我只是不明白为什么，可以使用一些专业知识。
#container {
width: 100%;
margin: auto;
}
.content-wrapper {
margin: auto;
max-width: 1040px;
overflow: hidden;
padding: 38px 50px 50px;
position: relative;
}
/* landing page masthead */
#mastheadBar {
max-width: 100%;
background-color: #FDA929;
}
#mastheadImage {
max-width: 1520px;
background-image: url(#);
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: scroll;
margin: auto;
}
.logoWrapper {
max-width: 310px;
margin-bottom: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 23px;
color: #FFF;
vertical-align: middle;
display: table;
}
.LogoWrapperText {
display: table-cell;
vertical-align: middle;
padding-left: 21px;
}
h1 {
font-size: 50px;
font-weight: 700;
line-height: 54px;
color: #FFF;
max-width: 745px;
margin-top: -14px;
margin-bottom: 23px;
}
/* landing page main content */
#mainContent {
background-color: #fff;
overflow: hidden;
}
#mainContent p {
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #737373;
padding-top: 12px;
}
#mainContent li {
color: #737373;
font-size: 18px;
font-weight: 400;
line-height: 24px;
list-style-position: outside;
margin: 0 0 8px 10px;
}
#mainContent ul {
list-style-position: inside;
list-style-type: disc;
padding-top: 32px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
#mainContentLeft {
float: left;
width: 57.4468085106383%;
margin-top: -5px;
}
#mainContentLeftWrap {
margin-bottom: 11px;
}
#mainContentRightForm {
background: white;
padding: 24px;
position: absolute;
width: 340px;
z-index: 9999;
border: thin solid #F00;
right: 50px;
top: -154px;
}
<div id="container">
<div id="mastheadBar">
<div id="mastheadImage">
<div class="content-wrapper">
<div class="logoWrapper">
<div class="LogoWrapperText">${logo-text}</div>
</div>
<h1>${page-title}</h1>
</div>
</div>
</div>
<div id="mainContent">
<div class="content-wrapper">
<div id="mainContentLeft">
<div id="mainContentLeftWrap" class="mktoText" mktoName="Main Body
Text">
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
</div>
</div>
<div id="mainContentRightForm">Please fill in the form below.Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia,
turpis ac hendrerit dictum, erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.
</p>
</div>
</div>
</div>
在子元素 (#mainContentRightForm) 上设置 z-index 不会将其叠加在其父元素 (#mainContent) 兄弟元素 (#mastheadBar) 之上，因为#mainContent 需要 z-index.
在这种情况下，您不需要 z-index，因为 .content-wrapper 和 #mainContent 上的 overflow: hidden 阻止了 #mainContentRightForm显示未切割。
#container {
width: 100%;
margin: auto;
}
.content-wrapper {
margin: auto;
max-width: 1040px;
overflow: hidden;
padding: 38px 50px 50px;
position: relative;
}
/* landing page masthead */
#mastheadBar {
max-width: 100%;
background-color: #FDA929;
}
#mastheadImage {
max-width: 1520px;
background-image: url(#);
background-repeat: no-repeat;
background-position: center bottom;
background-attachment: scroll;
margin: auto;
}
.logoWrapper {
max-width: 310px;
margin-bottom: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 23px;
color: #FFF;
vertical-align: middle;
display: table;
}
.LogoWrapperText {
display: table-cell;
vertical-align: middle;
padding-left: 21px;
}
h1 {
font-size: 50px;
font-weight: 700;
line-height: 54px;
color: #FFF;
max-width: 745px;
margin-top: -14px;
margin-bottom: 23px;
}
/* landing page main content */
#mainContent {
background-color: #fff;
overflow: hidden;
}
#mainContent p {
font-size: 18px;
line-height: 24px;
font-weight: 400;
color: #737373;
padding-top: 12px;
}
#mainContent li {
color: #737373;
font-size: 18px;
font-weight: 400;
line-height: 24px;
list-style-position: outside;
margin: 0 0 8px 10px;
}
#mainContent ul {
list-style-position: inside;
list-style-type: disc;
padding-top: 32px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
}
#mainContentLeft {
float: left;
width: 57.4468085106383%;
margin-top: -5px;
}
#mainContentLeftWrap {
margin-bottom: 11px;
}
#mainContentRightForm {
background: white;
padding: 24px;
position: absolute;
width: 340px;
z-index: 9999;
border: thin solid #F00;
right: 50px;
top: -154px;
}
<div id="container">
<div id="mastheadBar">
<div id="mastheadImage">
<div class="content-wrapper">
<div class="logoWrapper">
<div class="LogoWrapperText">${logo-text}</div>
</div>
<h1>${page-title}</h1>
</div>
</div>
</div>
<div id="mainContent">
<div class="content-wrapper">
<div id="mainContentLeft">
<div id="mainContentLeftWrap" class="mktoText" mktoName="Main Body
Text">
<p>Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia, turpis ac hendrerit dictum,
erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.</p>
<p>Vivamus quis ex pellentesque, pharetra elit eget, molestie arcu:</p>
<ul>
<li>Integer ornare velit metus, sit amet tincidunt neque</li>
<li>luctus vitae. Suspendisse vulputate cursus</li>
<li>scelerisque. Sed ac lectus eget nisi facilisis</li>
</ul>
</div>
</div>
<div id="mainContentRightForm">Please fill in the form below.Aenean sed orci efficitur, convallis arcu sit amet, consequat dolor. Vestibulum vestibulum nisl quis mattis rhoncus. Cras ut imperdiet leo. Phasellus luctus mauris lectus, quis semper dui dignissim at. Donec lacinia,
turpis ac hendrerit dictum, erat nisl iaculis lacus, eu ultrices libero nisi eu sapien. Praesent id congue elit, sed rutrum lorem. Duis quis nisi elit. Pellentesque nec cursus leo.
</p>
</div>
</div>
</div>