z-index de 9999 ne fonctionne pas sur div absolu

Question

Le z-index sur .mainContentRightForm ne fonctionne pas. Il devrait être flottant au-dessus de la barre orange, mais il est assis derrière. Je ne peux pas comprendre pourquoi, pourrait utiliser une certaine expertise.

#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

Réglage z-index sur un élément enfant (#mainContentRightForm) ne sera pas la couche sur le dessus de ses parents (#mainContent) frères et soeurs (#mastheadBar), pour que pour travailler le #mainContent ont besoin d'un z-index.

Dans ce cas, vous n'avez pas besoin d'un z-index car il est le overflow: hidden sur .content-wrapper et #mainContent qui empêche la #mainContentRightForm pour afficher non coupé.

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