Проблема с позиционированием элементов, не могу выставить absolute
На данный момент юзаю position: relative, что жутко неудобно, но при попытке выставить absolute элемент, к которому прилагается свойство, перестаёт перемещаться вместе со всей страницей.
Не знаю, в каком месте находится проблема, поэтому прилагаю весь css целиком.
*{
padding: 0;
margin: 0;
border: 0;
}
*,*::before,*:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus, :active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
height: 100%;
width: 100%;
font-size: 100%;
line-height: 100%;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family: inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding: 0;border: 0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size: inherit;font-weight: 400;}
body{
height: 100vh;
background-color: #0A0A0A;
min-width: 1170px;
}
.container{
width: 100%;
height: 100%;
overflow-y: scroll;
scroll-behavior: smooth;
/*scroll-snap-type: y mandatory;*/
}
img{
position: fixed;
width: 401px;
height: 1080px;
}
.sidebar1{
left: -70px;
width: 495px;
height: 1080px;
}
.Navbar{
top: 0;
z-index: 0;
display: flex;
position: fixed;
}
.Navbar ul{
margin-top: 300px;
display: flex;
flex-direction: column;
list-style: none;
width: 100%;
height: 100%;
justify-content: left;
}
.Navbar ul li{
margin-top: 49px;
margin-left: 118px;
}
#PIZDEC{
margin-top: 42px;
}
.Navbar ul li a {
text-decoration: none;
color: #f4f4f4;
font-family: 'Rubik', sans-serif;
font-size: 0.9vw;
height: 100%;
}
.Navbar ul li a:hover {
color: #969696;
}
#indicator1{
width: 0px;
height: 3px;
background-color: #f4f4f4;
transition: .5s ease;
top: 368px;
left: 192px;
border-radius: 3px;
position: fixed;
overflow: hidden;
opacity: 60%;
}
.current #indicator1{
z-index: 1;
opacity: 100%;
left: 140px;
width: 52px;
}
#indicator2{
width: 0px;
height: 3px;
background-color: #f4f4f4;
transition: .5s ease;
top: 433px;
left: 278px;
border-radius: 3px;
position: fixed;
opacity: 60%;
overflow: hidden;
}
.current #indicator2{
opacity: 100%;
left: 190px;
width: 88px;
}
#indicator3{
width: 88px;
height: 3px;
transition: 0.5s;
top: 507px;
left: 278px;
border-radius: 3px;
position: fixed;
overflow: hidden;
}
.current #indicator3{
z-index: 1;
background-color: #f4f4f4;
left: 190px;
opacity: 100%;
}
#indicator4{
width: 40px;
height: 3px;
transition: .5s;
top: 565px;
left: 288px;
border-radius: 3px;
position: fixed;
overflow: hidden;
opacity: 60%;
}
.current #indicator4{
z-index: 1;
background-color: #f4f4f4;
left: 200px;
width: 88px;
opacity: 100%;
}
#indicator5{
width: 40px;
height: 3px;
transition: .5s;
top: 630px;
left: 312px;
border-radius: 3px;
position: fixed;
overflow: hidden;
opacity: 60%;
}
.current #indicator5{
z-index: 1;
background-color: #f4f4f4;
width: 88px;
left: 224px;
opacity: 100%;
}
#indicator6{
width: 88px;
height: 3px;
transition: .5s;
top: 695px;
left: 229px;
border-radius: 3px;
position: fixed;
overflow: hidden;
opacity: 60%;
}
.current #indicator6{
z-index: 1;
background-color: #f4f4f4;
left: 141px;
opacity: 100%;
}
#indicator7{
width: 44px;
height: 3px;
transition: .5s;
top: 760px;
left: 188px;
border-radius: 3px;
position: fixed;
overflow: hidden;
opacity: 60%;
}
.current #indicator7{
z-index: 1;
background-color: #f4f4f4;
left: 144px;
opacity: 100%;
}
/*News Page:*/
.News_iphone{
display: block;
position: relative;
overflow-y: scroll;
width: 666px;
height: 690px;
left: 900px;
top: 10px;
}
.News_text{
display: block;
position: relative;
width: 570px;
height: 283.3px;
left: -658px;
top: 140px;
}
.News_logos{
display: block;
position: relative;
width: 540px;
height: 50.8px;
left: -673px;
top: 165px;
}
.News_Scroller{
display: flex;
position: relative;
width: 17px;
height: 248px;
left: 250px;
top: 40px;
}
.News_links{
position: relative;
width: 400px;
height: 46px;
top: -690px;
left: 90px;
}
/*Calendar Page:*/
.Calendar_iphone{
display: flex;
position: relative;
width: 750px;
height: 800px;
left: 865px;
top: 10px;
}
.Calendar_text{
display: flex;
position: relative;
width: 500px;
height: 141px;
left: -728px;
top: 240px;
}
.Calendar_calendar{
display: flex;
position: relative;
width: 289px;
height: 285px;
top: 260px;
left: -850px;
}
.Calendar_scroller{
display: flex;
position: relative;
height: 332px;
width: 17px;
left: 215px;
top: -70px;
}
/*Pathfinder Page:*/
.Pathfinder_iphone{
display: flex;
position: relative;
width: 755px;
height: 700px;
left: 910px;
top: 10px;
}
.Pathfinder_text{
display: flex;
position: relative;
left: -735px;
top: 170px;
width: 497px;
height: 380px;
}
.Pathfinder_scroller{
display: flex;
position: relative;
left: 210px;
top: 2px;
width: 17px;
height: 233px;
}
/*Genres Page:*/
.Genres_iphone{
display: flex;
position: relative;
width: 935px;
height: 845px;
left: 710px;
top: 0px;
}
.Genres_text{
display: flex;
position: relative;
width: 340px;
height: 213px;
left: -900px;
top: 130px;
}
.Genres_scroller{
position: relative;
width: 17px;
height: 331px;
left: 125px;
top: 36px;
}
/*Discounts Page:*/
.Discounts_iphone{
display: flex;
position: relative;
width: 820px;
height: 845px;
left: 800px;
top: 10px;
}
.Discounts_text{
display: flex;
position: relative;
width: 451px;
height: 284px;
left: -786px;
top: 175px;
}
.Discounts_scroller{
display: flex;
position: relative;
width: 17px;
height: 359px;
left: 180px;
top: -10px;
}
/*Notification Page:*/
.Notification_iphone{
display: flex;
position: relative;
width: 990px;
height: 930px;
left: 725px;
top: 20px;
}
.Notification_text{
display: flex;
position: relative;
width: 428px;
height: 149px;
left: -847px;
top: 70px;
}
.Notification_scroller{
display: flex;
position: relative;
width: 17px;
height: 282px;
top: 90px;
left: 130px;
}
/*Ads Page:*/
.Ads_iphone{
display: flex;
position: relative;
width: 910px;
height: 970px;
left: 920px;
top: 130px;
}
.Ads_text{
display: flex;
position: relative;
width: 266px;
height: 149px;
left: -907px;
top: 73px;
}
.Ads_scroller{
display: flex;
position: relative;
width: 17px;
height: 248px;
left: 150px;
top: 120px;
}
.Ads_contacts{
display: flex;
position: relative;
width: 1214px;
height: 29px;
left: -430px;
top: 300px;
}
/*Эта штука отвечает за постраничный скролл*/
section{
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: left;
width: 100%;
height: 100vh;
scroll-snap-align: center;
}
section#News {
background-image: url('css_img/Site_Background.png');
}
section#Calendar {
background-image: url('css_img/Site_Background_2.png');
}
section#Pathfinder {
background-image: url('css_img/Site_Background_3.png');
}
section#Genres {
background-image: url('css_img/Site_Background_4.png');
}
section#Discounts {
background-image: url('css_img/Site_Background_5.png');
}
section#Notifications {
background-image: url('css_img/Site_Background_6.png');
}
section#Ads {
background-image: url('css_img/Site_Background_7.png');
}
}