如何在固定位置设置css中的元素

我创建“返回顶部”按钮，因此我通过使用position:fixed;和background-attachment:fixed;将其设置为固定位置，但我仍然没有在固定位置获取它，当输入一些新数据时它改变了它的位置。如何在固定位置设置css中的元素

<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>

来源

2016-06-24 Mandar Sant

更改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是没有必要的。

小提琴：https://jsfiddle.net/4f1zn1hv/

来源

2016-06-24 16:40:42 theblindprophet

如何在固定位置设置css中的元素

回答

相关问题