CSS「Checkbox hack」z-index不起作用

我正在使用css「checkbox hack」，這樣當有人點擊標籤時，會彈出一個表單。表單元素使用:before僞元素創建透明背景，但出於某種原因，我無法讓z-index在窗體上生效，以便背景出現在窗體後面。如果您經過z索引中的某個區別，表格的輸入會顯示在:before僞元素的頂部，但不會顯示背景或按鈕的顏色等。CSS「Checkbox hack」z-index不起作用

我已經嘗試將窗體包裝在div，我能夠去工作。但是，W3C驗證程序不會將div作爲標籤元素的子項。試圖找出一個僞元素，因爲我以前見過它。

表單位置屬性設置爲absolute，僞元素設置爲fixed。我讀到它可能與它有關，但我改變了它們全部&它仍然沒有預期的效果。在其餘的css文件中沒有其他的z-index被編輯。

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>

在此先感謝。

來源

2017-01-25 patrickb

嘗試改變位置相對 – Araymer

問題尋求幫助的代碼必須包括必要的重現它最短的代碼**在問題本身**最好在**堆棧片段**。雖然您提供了一個鏈接，但如果它變得無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。請參閱[**我網站上的某些內容不起作用，我可以只粘貼一個鏈接**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-犯規，工作可以-I-剛剛糊一個鏈接到它）。 –

如果你想得到答案，你需要在問題中包含你的代碼。 –

在元素上使用負z-index會將其放在父元素的後面。

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>

來源

2017-01-25 17:20:08

CSS「Checkbox hack」z-index不起作用

回答

相關問題