Я создаю веб-страницу для своего дедушки, и у меня будет этот маленький байкер, который бегает по экрану, останавливается при наведении курсора и говорит: «Надень шлем». Я заставил его двигаться вперед и назад, и он закреплен на панели навигации, но проблема в том, что при изменении размера экрана, скажем, на меньшем телефоне или компьютере, чувак-байкер поворачивается в другом месте, и он бежит впереди о навигационной панели.
вот html:
вот css
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100%;
}
.navbar-default {
background: none;
}
.navbar{
position: fixed;
z-index: 10;
padding: 10px 0 10px 10px;
top: 0;
width: 100%;
}
footer{
background-color:#e6e6e6;
}
.jumbotron{
background-image: url('download.jpeg');
color: white;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
margin-top: 0px;
margin-bottom: 8px;
}
a{
color:#2e5984;
}
.navbar-brand{
height: 60px;
width: 100px;
}
#aboutusimg{
background-size: 100%;
background-image: url(download.jpeg);
background-repeat:no-repeat;
height: 400px;
}
/* slider */
.carousel .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.carousel .carousel-item:first-of-type {
background-image: url('download.jpeg');
}
.carousel .carousel-item:nth-of-type(2) {
background-image: url("download.jpeg");
}
.carousel .carousel-item:last-of-type {
background-image: url("download.jpeg");
}
.carousel-control-prev-icon, .carousel-control-next-icon {
width: 50px;
height: 50px;
}
/* partners slider, about page */
/* carousel */
h2{
text-align:center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* lil dude */
#riding{
width: 50px;
height: 40px;
z-index: 30;
position: fixed;
top: 25px;
left: 0px;
transform: rotateY(0deg);
}
#message{
color: white;
position: fixed;
top: 0;
left: 0;
}
имейте в виду, что есть и другие файлы, это просто index. html, поэтому в css есть другие вещи, но маленький чувак находится внизу css и перед навигационной панелью в html.