對話框是web開發中常用的元素之一，它可用于展示信息、提示用戶操作，或者與用戶進行交互。CSS規定定義了幾種不同類型的對話框，我們可以根據需要選擇合適的類型。

模態對話框

.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 5px;
}

模態對話框是一種阻止用戶操作頁面其他元素的對話框。它一般會使用半透明的背景色覆蓋整個頁面，以突出顯示對話框內容，并且需要一個“關閉”按鈕讓用戶關閉對話框。

非模態對話框

.dialog {
position: absolute;
z-index: 1;
top: 100px;
left: 50%;
transform: translateX(-50%);
width: 400px;
background-color: white;
padding: 20px;
border-radius: 5px;
}

非模態對話框不會影響頁面其他元素的操作。它一般會出現在頁面中央或者離某個元素比較近的位置，用于展示一些與頁面內容相關的信息。

通知框

.notification {
position: fixed;
z-index: 1;
top: 20px;
right: 20px;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

通知框可以用來展示一些臨時性的信息，如新消息、操作成功等。它通常會位于頁面的某個角落，并且一般會帶有消失的動畫效果。