CSS“复选框黑客” z-index不起作用

Question

I'm using the css "checkbox hack" so that when someone clicks on a label, a form pops up. The form element is using a :before pseudo element to create a transparent background, but for some reason I can't get the z-index to take effect on the form so that the background appears behind the form. If you go past a certain difference in z-indexes, the inputs of the form appear on top of the :before pseudo element, but not the background or button colors, etc.

I've already tried wrapping the form in a div , which I was able to get to work. However, w3c validator doesn't like a div as a child of a label element. Trying to figure it out using a pseudo element, since I've seen it work before.

The form position attribute is set to absolute and the pseudo element to fixed . I read that it might have something to do with it, but I changed them all & it still doesn't have the desired effect. There are no other z-indexes edited in the rest of the css file.

 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> 

Thanks in advance.

Answer 1

Using a negative z-index on an element will place it behind it's 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>