Question

我正在使用css＆＃34;复选框hack＆＃34;这样，当有人点击标签时，会弹出一个表格。表单元素使用:before伪元素来创建透明背景，但由于某种原因，我无法使z-index在表单上生效，以便背景显示在表单后面。如果您超过z-index的某个差异，则表单的输入显示在:before伪元素的顶部，而不是背景或按钮颜色等。

我已经尝试将表单包装在div中，我可以开始工作了。但是，w3c验证器并不像div那样作为标签元素的子元素。试图用伪元素弄清楚，因为我之前已经看过它。

表单位置属性设置为absolute，伪元素设置为fixed。我读到它可能与它有关，但我把它们全部更改了它仍然没有达到预期的效果。在css文件的其余部分中没有编辑其他z索引。

＆＃13;

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

＆＃13;

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

＆＃13;

提前致谢。

Answer 1

在元素上使用负z-index会将其放在它的父元素之后。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS＆＃34; Checkbox hack＆＃34; z-index不起作用

1 个答案: