CODEWITHSUNDEEP
htmlcss
Mandarr Sant
Mandarr Sant

Reputation: 455

How to set element in css at fixed position

I am creating Back To Top button so I set it to fixed position by using position:fixed; and also background-attachment:fixed;, but I'm still not getting it at fixed position when I enter some new data it changes its position.

<html>
<head>
<title></title>
<style type="text/css">
a{
text-decoration:none;
color:black;
font-weight:bold;
}
a:hover{
border-bottom:1px solid rgba(0,235,255,0.77);
border-top:1px solid rgba(0,235,255,0.77);
}
ul{
list-style:none;
align-content:center;
}
li{
float:left;
font-size:20px;
padding-left:250px;
}
.background{
margin:0;
background-image:url("MWYLJ6SRDM.jpg");
background-size:1380px  auto;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
.topbar{
background-color:rgba(255,255,255,0.90);
height:50px;
width:100%;
color:black;
position:fixed;
z-index:1;
}
.backToTop{
background-color:rgba(240,0,255,0.72);
width:50px;
height:50px;
border-radius:25px;         
/*background-attachment:fixed;
position:fixed;*/
position:relative;
left:1295px;
top:600px;
}
</style>
</head>
<body class="background">
<div class="topbar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<h1>ABCDEFG</h1>
<div class="backToTop">
</div>
</body>
</html>

Upvotes: 0

Views: 48

Answers (1)

theblindprophet
theblindprophet

Reputation: 7937

Change the CSS:

.backToTop{
    background-color:rgba(240,0,255,0.72);
    width:50px;
    height:50px;
    border-radius:25px;         
    background-attachment:fixed;
    position:fixed;
    bottom: 10px;
 }

position: relative is not needed.

Fiddle: https://jsfiddle.net/4f1zn1hv/

Upvotes: 1

Related Questions