Невидимы эллементы, добавляемые js

Здравствуйте. Нечего объяснять, сразу к коду:

Код (Javascript):

1. window.onload = function() {
2.     var portfolio = document.getElementById('portfolio');
3.     window.modalOpened = false;
4.     portfolio.onclick = function(event) {
5.         var target = event.target;
6.         if(target.tagName === 'BUTTON' && window.modalOpened === false) {
7.             window.modalOpened = true;
8.             var id = target.dataset.id;
9.            
10.             var text = document.createTextNode('Тут был я');
11.            
12.             var answerContent = document.createElement("div");
13.             answerContent.classList.add('answer-content');
14.             answerContent.appendChild(text);
15.            
16.             target.appendChild(answerContent);
17.         }
18.     };
19. };

добавляет эллемент на страницу, но он невидимый. При наведении на него в инспекторе элементов его местоположение отображается, но фон его не видно, и контент тоже. Пробовал visibility, opacity, но ничего не изменяется.
На странице: .

HTML:

1.  
2.                             <div class="col-lg-3 col-md-3 col-sm-4 portfolio-item">
3.                                 <div class='portfolio-item-inner'>
4.                                     <div class='img'>
5.                                         <img src="/user_images/<?=$item['id'].'_'?>0.jpg" alt="">
6.                                         <button type="button" data-id="<?=$item['id']?>" class="item-delete-wrapper" title="Удалить этот коллаж">
7.                                             <i class="item-delete"></i>
8.                                             <div class="answer-content"></div>
9.                                         </button>
10.                                     </div>
11.                                 </div>
12.                             </div>

 

Там же куча свойств, в том числе background, div должен быть тёмно-серым.

 

И??? Я так понимаю, что вы клоните к тому что блоки с абсолютным позиционированием при каких-то условием невидимы?? Или как сделать его видимим?

 

Как бы, position: absolute делает блок абсолютным относительно родительского элемента со свойством position: relative, а не, как вы говорите, относительно "всего экрана". Соответственно, блок на моей странице спозиционирован относительно родительскгоо блока, и в инспекторе элементов это видно, вся проблема в том, что он прозрачный, и на эту прозрачность не влияют такие свойства как: visibility, opacity, z-index, display, и т.д. Если вы знаете в чём проблема, говорите, пожалуйста, прямо, а не загадками.

 

И ещё, если в инспекторе элементов убрать position: absolute - ничего не меняется (Кроме позиционирования, собственно).
--- Добавлено ---
Перенесите, пожалуйста, в HTML и css, т.к. js тут ни при чём. Если добавить элемент в html код, всё то же самое.

 

Нашёл ошибку. Дело было в том, что у родителя было свойство overflow: hidden, а так же, position: relative. Убрал position: relative и всё сработало. Только пришлось поработать над позиционированием. Знайте. Чтоб отменить overflow: hidden у дочерних элементов - нужно убрать position: relative; у родителя. Ответ нашёл здесь: https://toster.ru/q/258497