Css проблемы с позиционированием - PullRequest
Новая
       11

Css проблемы с позиционированием

0 голосов
/ 13 ноября 2018

Я включил 2 фотографии и мой код CSS ниже.Я пытаюсь поднять мой #bottomBar так, чтобы он находился прямо под ним и имел ту же ширину, что и черное пространство - вы можете видеть на изображениях ниже.

В зависимости от того, использую ли я относительное положение или абсолютное положение, я получаю желаемый эффект либо нахождения непосредственно под черным пространством, либо на той же ширине.Но никогда и то и другое одновременно.

Я использую шаблон начальной загрузки в своем html, это вызовет проблемы, которые я получаю?

относительная позиция CSS

абсолютная позиция CSS 

body{
	margin: 0;
	padding: 0;
}
.container{
	padding: 0;
	width: 100vw;
	height: 100vh;
	background-color: black;
}
#header{
	display: flex;
	padding: 5px;
	width: 100%;
	height: 10vh;
	background: linear-gradient(to right,white, #a5c6ff, #0066ff);
}
h1{
	position: relative;
	margin: auto;
	font-size: 6vw;
}
#img{
	width: 15vw;
}
.navbar{
	padding: 5px;
	background: linear-gradient(to right,white, #a5c6ff, #0066ff);
}
.navbar-toggler{
	display: flex;
	padding: 0;
	margin: 0;
	width: 10vw;
	height: 4vh;
	
}
.navbar-toggler-icon{
	height: 3vh;
	width: 9vw;
	margin: auto;
}
#bottomBar{
	position: absolute;
	top: 100%;
	width: 100%;
}
...