css - 9999 的 z-index 不适用于绝对 div

Question

.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>

Answer 1

在子元素 (#mainContentRightForm) 上设置 z-index 不会将其叠加在其父元素 (#mainContent) 之上sibling (#mastheadBar)，要使 #mainContent 正常工作，需要一个 z-index。

在这种情况下，您不需要 z-index，因为它是 .content-wrapper 上的 overflow: hidden 和#mainContent 防止 #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>