CSS "Checkbox hack" z-index ne fonctionne pas

Question

J'utilise le css "checkbox hack" de sorte que lorsque quelqu'un clique sur une étiquette, un formulaire apparaît. L'élément de formulaire utilise un pseudo-élément :before pour créer un arrière-plan transparent, mais pour une raison quelconque, je ne peux pas obtenir l'effet z-index sur le formulaire afin que l'arrière-plan apparaisse derrière le formulaire. Si vous dépassez une certaine différence dans les index z, les entrées du formulaire apparaissent au-dessus du pseudo élément :before, mais pas les couleurs d'arrière-plan ou de bouton, etc.

J'ai déjà essayé d'envelopper le formulaire dans un div, que j'ai pu mettre au travail. Toutefois, le validateur w3c n'aime pas div en tant qu'enfant d'un élément label. Essayer de le comprendre en utilisant un pseudo-élément, puisque je l'ai vu fonctionner avant.

L'attribut de position de formulaire est défini sur absolute et le pseudo-élément sur fixed. J'ai lu que cela pourrait avoir quelque chose à voir avec cela, mais je les ai tous changés & il n'a toujours pas l'effet désiré. Il n'y a pas d'autres index z modifiés dans le reste du fichier css.

section input:checked + .modal_form:before { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    content: ""; 
 
    background-color: rgba(0, 0, 0, .3); 
 
    z-index: 0; 
 
} 
 
section input:checked + .modal_form { 
 
    display: block; 
 
    position: absolute; 
 
    top: 108px; 
 
    left: 50%; 
 
    margin-left: -290px; 
 
    z-index: 2; 
 
} 
 
.modal_form { 
 
    box-sizing: border-box; 
 
    width: 580px; 
 
    padding: 36px 40px 40px 30px; 
 
    background-color: white; 
 
}

<label for="modal_toggle"> 
 
    <span class="todo">Item 1</span> 
 
    <input type="checkbox" id="modal_toggle" /> 
 
    <form action="#" method="post" class="modal_form"> 
 
    <fieldset> 
 
     <dl> 
 
     <dt> 
 
      <label for="title">Title</label> 
 
      </dt> 
 
     <dd> 
 
      <input type="text" id="title" name="title" placeholder="Todo Name" /> 
 
     </dd> 
 
     </dl> 
 

 
     <dl> 
 
     <dt> 
 
      <label>Due Date</label> 
 
      </dt> 
 
     <dd> 
 
      <input type="number" name="day" min="1" max="31" placeholder="Day" /> 
 
      <!-- 
 
      --><span class="separator">/</span> 
 
     </dd> 
 
     <!-- 
 
      --> 
 
     <dd> 
 
      <input type="number" name="month" min="1" max="12" placeholder="Month" /> 
 
      <!-- 
 
      --><span class="separator">/</span> 
 
     </dd> 
 
     <!-- 
 
      --> 
 
     <dd> 
 
      <input type="number" name="year" min="2017" max="2099" placeholder="Year" /> 
 
     </dd> 
 
     </dl> 
 

 
     <dl> 
 
     <dt class="top_align"> 
 
      <label for="description">Description</label> 
 
      </dt> 
 
     <dd class="description"> 
 
      <textarea name="description" id="description" placeholder="Description"></textarea> 
 
     </dd> 
 
     </dl> 
 
    </fieldset> 
 

 
    <fieldset class="field_align"> 
 
     <input type="submit" value="Save" /> 
 
     <input type="submit" value="Mark As Complete" /> 
 
    </fieldset> 
 
    </form> 
 
</label>

Merci à l'avance.

Answer 1

L'utilisation d'un index z négatif sur un élément le placera derrière son parent.

form { 
 
    position: absolute; 
 
    background: #ccc; 
 
} 
 

 
form:after { 
 
    position: fixed; 
 
    top: 0; right: 0; 
 
    background: red; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
}

<form> 
 
    <label>asdf</label> 
 
</form>