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

Программисты Html
Ответить Пред. темаСлед. тема
Anonymous
 Почему родительский элемент исчезает, когда его дочерний элемент устанавливается на «позицию: Absolute»?

Сообщение 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;
}

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






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, когда я применяю позицию: абсолютную в в .logo div с class="logo" исчезает. Технически его ширина равна 0 пикселей. И когда я закомментирую часть Position: Absolute, элемент div снова становится видимым, занимая 100% ширины родительского элемента.
Я пробовал искать на разных платформах решение, но не смог найти решение, отвечающее моему запросу.
Когда я проверяю код, текст виден в обоих сценариях, но элемент div с class="logo" отображается в виде рамки только в том случае, если позиция: Absolute не применяется. тег . Как только будет применена позиция: Absolute, это поле исчезнет. И при проверке видно, что ширина div становится 0 пикселей.
Кто-нибудь может объяснить, почему это происходит?
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/793 ... o-position
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Html»