z-index 9999不能在絕對div上工作

Question

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

Answer 1

子元素（#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>