고정 된 위치에 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에서 요소를 설정하는 방법

답변

관련 문제