Question

z-index上的.mainContentRightForm无效。它应该漂浮在橙色条上方，但它位于它后面。我无法弄清楚原因，可以使用一些专业知识。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

在子元素（z-index）上设置#mainContentRightForm不会在父元素（#mainContent）兄弟（#mastheadBar）之上对其进行分层，为此工作#mainContent需要z-index。

在这种情况下，您不需要z-index因为overflow: hidden和.content-wrapper #mainContent阻止了#mainContentRightForm显示未切割。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

z-index为9999无法处理绝对div

1 个答案: