Код: Выделить всё
* {
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