Наложение div не отображается поверх моего основного div - PullRequest
Новая
       1

Наложение div не отображается поверх моего основного div

0 голосов
/ 25 марта 2020

Я пытаюсь создать наложение, у меня есть кнопка при нажатии, новый наложенный div будет отображаться поверх моего основного div, но когда я не могу понять, почему созданный мной overlay 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» для отображения «оверлейного контейнера», однако он не отображается, 

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

1 Ответ

0 голосов
/ 25 марта 2020

поместите ваш .overlaycontainer, добавив эти CSS строки, и он появится. 

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

Элемент должен иметь высоту и ширину, чтобы отображаться, это не значит, что мы всегда должны установить ширину и высоту для элементов. Происходило то, что вы устанавливали высоту .overlaycontainer на 100%, а она не брала ее, и для этого ее родитель должен иметь фиксированную ширину для работы.

Обычно накладывается оверлей.

Свойство position используется для управления расположением элемента. position:absolute всегда ссылается на своего родителя, который должен быть установлен как position:relative.

Когда вы изменяете левое или верхнее значение, позиция .overlaycontainer изменяется. если вы передадите position: relative родительскому элементу или любому элементу бабушки и дедушки оверлея (в случаях, когда это необходимо), он изменит свое местоположение в этом отношении. если у любого из предков элемента нет position: relative, как в нашем случае, элемент будет относиться к телу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...