如何在div中放置div <form> 在模式對話框的右下角？

Question

我知道該問題已經在網站上提出，但我的情況有所不同。 我正在設計一個響應式聊天應用程序，我想在使用html和css和JS創建的modal dialog中創建注冊表單。在模態內容中，我有一個包含標題<h1>的標頭，並將其標為下面的符號表格。

在表單中，我有兩個按鈕，我想將它們放在模式對話框的右下角。 我試圖將父div定位為相對，然后將子div定位為絕對，並具有以下屬性：right：0; 底部：0; 但這沒有用。 還嘗試將子div定位為固定，但隨后我脫離了窗口右下角的模式。

HTML：

 <!-- The Modal -->
<div class="modal">
  <!-- Modal content -->
  <div class="modal-content">

    <form>
      <div class="p-div">
        <labe>Email:</labe>
        <input type="text" name="email" required>

        <div class="c-div">
          <button type="button">Reset</button>
          <button type="submit">Sign up</button>
        </div>
      </div>
    </form>
  </div>
</div>

CSS：

    /* The Modal (background) */
.modal {
    display: block; 
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: rgb(200, 200, 200);
    margin: 8% auto; 
    border-radius: 1px;
    width: 88.7%; 
    height: 89.3%;

}

.p-div{
  padding: 16px; 
  position: relative;
}

input{
  display:block;
}

.c-div{
  position: absolute; 
  right: 0; 
  bottom: 0; 
}

這是一個小提琴

有什么建議么？

提前致謝！

Answer 1

這是您的小提琴的叉子，我將c-div從p-div容器中取出，然后將其完全定位。

https://jsfiddle.net/e1z07xat/3/

.c-div {
  position: absolute; 
  right: 0; 
  bottom: 0; 
  width: 165px;
}