疊加 div 沒有出現在我的主 div 之上

Question

我正在嘗試進行疊加設計，單擊時我有一個按鈕，一個新的疊加 div 將顯示在我的主 div 頂部，但我似乎無法弄清楚為什么我創建的疊加 div 沒有出現. 我觀看了教程並搜索了與我類似的情況，但我不明白為什么它沒有顯示。

這是我的 html 頁面：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Liu+Jian+Mao+Cao&display=swap" 
rel="stylesheet">
<link rel="stylesheet" href="thiscss/randomqoutes.css">
<title>Document</title>
</head>

<body>

<div class="container">
    <h2>RCaT11</h2>
    <div class="qoutewrapper">
        <h1>Have an Inspirational day!</h1>
        <button id="btn">Genererate Qoute</button>
    </div>

    <div class="overlaycontainer">

    </div>
    </div>

    </body>
    <script type="text/javascript" src="javascript/randomqoutes.js"></script>

    </html>

這是我的 css 文件，我已將“overlaycontainer”類顯示設置為 none 以使其在單擊按鈕之前不會首先顯示：

body {
background: linear-gradient(to left, #ED8F20, #EBD626);
margin: 0;
padding: 50px;
     }

 .container {
 display: flex;
  }

   .qoutewrapper {
    font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
    width: 900px;
    height: 250px;
    margin: 0 auto;
    margin-top: 10%;
   padding: 10px;
   display: flex
   }

 .qoutewrapper h1 {
white-space: nowrap;
font-weight: 700;
font-size: 70px;
margin: 0 auto;
position: relative;
left: 90px;
margin-top: 50px;
}

h2 {
font-family: 'Liu Jian Mao Cao', cursive, sans-serif;
font-size: 2em;
position: absolute;
left: 90%;
color: red;
float: right;
  }

.container button {
color: rgba(26, 25, 25, 0.897) !important;
text-transform: uppercase;
background: none;
padding: 12px;
border: 2px dotted rgba(26, 25, 25, 0.897) !important;
font-weight: 800;
float: right;
margin-top: 200px;
}

.container button:hover {
color: #EBD626 !important;
background: rgba(26, 25, 25, 0.897);
border-color: none !important;
transition: all 0.4s ease 0s;
display: flex;
}

.overlaycontainer {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
display: none;
 }

這是我的 javascript 文件，我寫過當單擊按鈕時，顯示將設置為“flex”以顯示“overlaycontainer”，但是它沒有顯示出來，

document.getElementById('btn').addEventListener('click', function() {
document.querySelector('.overlaycontainer').style.display = "flex";
 })

Answer 1

通過添加這些 CSS 行來定位您的.overlaycontainer ，它將顯示出來。

    position: absolute;
    left: 0;
    top: 0;

一個元素必須有一個高度和寬度才能顯示出來，這並不意味着我們總是必須為元素設置寬度和高度。 發生的事情是，您將.overlaycontainer的高度設置為 100% 並且它沒有接受它，因此它的父級必須具有固定寬度才能工作。

通常覆蓋被定位。

position屬性用於操縱元素的位置。 position:absolute總是引用其父級，需要設置為position:relative 。

當您更改 left 或 top 值時， .overlaycontainer的位置.overlaycontainer發生變化。 如果您給出position: relative對於疊加層的父元素或任何祖父母元素（在必須的情況下），它將在該方面更改其位置。 如果元素的任何祖先沒有position: relative ，在我們的情況下，元素將相對於主體。

疊加 div 沒有出現在我的主 div 之上

問題描述

1 個解決方案

解決方案1
1 已采納 2020-03-25 05:14:25

疊加 div 沒有出現在我的主 div 之上

問題描述

1 個解決方案

解決方案1 1 已采納 2020-03-25 05:14:25

解決方案1
1 已采納 2020-03-25 05:14:25