Witam mam problem otóż nie chce mi działać position:fixed;
otóż kiedy odpalam strone i scrolluje to obiekt nie scrolluje sie razem z stroną oraz musze dać bottom:800px; żeby wgl mi sie na ekranie startowym pojawił ten obiekt. o co moze chodzić ?
<!DOCTYPE HTML>
<html lang "eng">
<head>
<meta charset = "utf-8" />
<meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1"/>
<title>Playing Crocodile - Games are what we all love </title>
<meta name = "description" content "Games are what we all love"/>
<meta name = "keywords" content "games,gry,Playing Crocodile"/>
<link rel = "stylesheet" href = "CSS/style.css" type = "text/css"/>
<link rel = "stylesheet" href = "CSS/fontello.css" type = "text/css"/>
<script src = "Js/timer.js"></script>
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Lato&display=swap"
rel="stylesheet" type = "text/css">
</head>
<body onload = "odliczanie();">
<a href= "#" class = "scrollup"></a>
<div class = "box1">
<div id = "logo"></div>
<div id ="search">
<div id = "searchicon">
<i class = "icon-search"></i>
</div>
<input type="text" name = "fraza" value = ""placeholder = "Search">
</div>
<div class ="BF"><a class = "tilelink2"href = "#">Log In</a></div>
<div class ="BF"><a class = "tilelink2"href = "#">Sign Up</a></div>
<div class ="tile0"><i class = "icon-menu"></i></div>
</div>
<div id = "logocontainer"></div>
<div class = "box2">
<div id ="clock">12:00:00</div>
</div>
<div class = "square">
<div class = "tile1"><a class = "tilelink1"href = "Horror.html">1</a></div>
<div class = "tile1">2</div>
<div class = "tile1">3</div>
<div class = "tile1">4</div>
<div class = "tile1">5</div>
<div class = "tile1">6</div>
<div class = "tile1">7</div>
<div class = "tile1">8</div>
<div class = "tile1">9</div>
<div class = "tile1">10</div>
<div class = "tile1">11</div>
<div class = "tile1">12</div>
<div class = "tile1">13</div>
<div class = "tile1">14</div>
</div>
<div style = "clear:both;"></div>
<div class = "box2">
<div class ="name">HOT</div>
</div>
<div class = "square2">
<div class = "tile2">1</div>
<div class = "tile2">2</div>
<div class = "tile2">3</div>
<div style = "clear:both;"></div>
<div class = "tile2">4</div>
<div class = "tile2">5</div>
<div class = "tile2">6</div>
<div style = "clear:both;"></div>
<div class = "tile2">7</div>
<div class = "tile2">8</div>
<div class = "tile2">9</div>
<div style = "clear:both;"></div>
</div>
<div class = "box2">
<div class ="name">BEST</div>
<div class = "square2">
<div class = "tile2">1</div>
<div class = "tile2">2</div>
<div class = "tile2">3</div>
<div style = "clear:both;"></div>
<div class = "tile2">4</div>
<div class = "tile2">5</div>
<div class = "tile2">6</div>
<div style = "clear:both;"></div>
<div class = "tile2">7</div>
<div class = "tile2">8</div>
<div class = "tile2">9</div>
<div style = "clear:both;"></div>
</div>
<div class = "info"></div>
<div class = "footer"></div>
</div>
</body>
</html>
html
{
height:100%
overflow: hidden;
}
body
{
background-image:linear-gradient(120deg,#464646,#131313);
font-family: 'Lato', sans-serif;
color: #ffffff;
font-size: 20px;
margin: 0px;
perspective: 1px;
transform-style:preserve-3d;
height: 100%;
overflow-y:scroll;
overflow-x:hidden;
}
#logocontainer
{
height: 400px;
width: 100%;
background-image:linear-gradient(120deg,#2c3e50,#8e44ad);
}
#logo
{
width: 305px;
height: 40px;
background-color: #FE0101;
float:left;
}
.box1
{
height: 40px;
width: 100%;
position: sticky;
top:0;
}
.box2
{
height: 50px;
width: 100%;
}
.info
{
height: 200px;
width: 100%;
background-color: #111111;
}
.footer
{
height: 150px;
width: 100%;
}
.square
{
width: 100%;
}
.square2
{
width: 80%;
margin-left:auto;
margin-right:auto;
}
.tile0
{
width: 40px;
height: 40px;
background-color: #1c74b2;
float:left;
font-size:25px;
line-height:40px;
text-align: center;
display: inline-block;
}
.tile0:hover
{
background-color: #2084c2;
}
#search
{
background-color: #353535;
float:left;
font-family: 'Josefin Slab',sans-serif;
width: 1356px;
height: 40px;
font-size:20px;
line-height:40px;
background-image:linear-gradient(120deg,#464646,#131313);
}
#searchicon
{
width: 40px;
height: 40px;
float:left;
font-size:25px;
line-height:45px;
text-align: center;
display: inline-block;
}
#search:hover
{
background-image:linear-gradient(120deg,#575757,#242424);
border-bottom: 1px solid #c0392b;
}
#search input
{
background: none;
border:none;
outline: none;
width:1310px;
font-size:14px;
color: #ffffff;
}
.BF
{
background-image:linear-gradient(120deg,#464646,#353535);
height : 40px;
float:left;
font-family: 'Josefin Slab',sans-serif;
font-size:20px;
width: 100px;
text-align:center;
line-height:40px;
border-left: 1px dashed #010101;
}
.BF:hover
{
background-image:linear-gradient(120deg,#575757,#242424);
border-bottom: 1px solid #c0392b;
}
.name
{
height:60px;
float:left;
font-family: 'Josefin Slab',sans-serif;
font-size:40px;
width: 100%;
text-align:center;
line-height:60px;
}
#clock
{
height:60px;
float:left;
font-family: 'Josefin Slab',sans-serif;
font-size:40px;
width: 100%;
text-align:center;
line-height:60px;
}
#clock:hover
{
background-color: #242424;
}
.name:hover
{
background-color: #242424;
}
.tile1
{
margin: 10px;
width: 115px;
height: 150px;
background-color: #1c74b2;
float:left;
}
.tile1:hover
{
background-color: #2084c2;
}
.tile2
{
margin: 10px;
width: 480px;
height: 297px;
background-color: #650000;
float:left;
}
.tile2:hover
{
background-color: #760000;
}
a.tilelink1
{
display:block;
color:#ffffff;
text-decoration:none;
width: 115px;
height: 150px;
}
a.tilelink2
{
display:block;
color:#ffffff;
text-decoration:none;
width: 100px;
height: 40px;
}
.scrollup
{
width:64px;
height:64px;
text-decoration:none;
background-image:linear-gradient(120deg,#2c3e50,#8e44ad);
position :fixed;
right:50px;
bottom:800px;
}
