Почему родительский элемент исчезает, когда его дочерний элемент устанавливается на «позицию: Absolute»? ⇐ CSS

[Anonymous]

Код: Выделить всё

* {
margin: 0px;
padding: 0px;
font-family: "Poppins", sans-serif;
}

.main_box{
background-image: url(images/photo.jpg);
background-size: cover;
height: 100vh;
}

.btn_one{
color: white;
font-size: 30px;
font-weight: bold;
position: absolute;
left: 16px;
line-height: 60px;
}

.sidebar_menu{
position: fixed;
/* left: -350px; */
height: 100vh;
width: 300px;
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.sidebar_menu .logo{
position: absolute;
width: 100%;
line-height: 60px;
top: 1px;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.sidebar_menu .logo a {
position: absolute;
left: 30px;
color: white;
}< /code>






CSS Mini Project
[*]







[i]


[/i]



[url=#]I am Groot[/url]


[i][/i]


[list]

[i][/i]
[url=#]Gallery[/url]

[*]
[i][/i]
[url=#]Shortcuts[/url]

[*]
[i][/i]
[url=#]Exhibits[/url]

[*]
[i][/i]
[url=#]Events[/url]

[*]
[i][/i]
[url=#]Store[/url]

[*]
[i][/i]
[url=#]Contact[/url]

[*]
[i][/i]
[url=#]Feedback[/url]

[/list]

[list]
[url=#][i][/i][/url]
[url=#][i][/i][/url]
[url=#][i][/i][/url]
[url=#][i][/i][/url]
[/list]

В приведенном выше коде CSS, когда я применяю позицию: Absolute В в .logo div с class = "logo" исчезает. Технически его ширина установлена ​​на 0PX. И когда я прокомментирую позицию: Absolute часть, Div снова видно, занимая 100% ширину родительского элемента. Решение, но не смог найти тот, который решает мой запрос. > видно как поле только в том случае, когда позиция: Absolute не применяется к тегу . Как только позиция: Absolute применяется, эта коробка исчезает. И после проверки, это показывает, что ширина дивирования становится 0px.
может кто -нибудь объяснить, пожалуйста, почему это происходит?
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/793 ... o-position