Question

我想把捐款箱作为一个div，但我想让它随着你的页面移动而不改变它的位置或留在它的旧位置（即位置：固定）。我给了div定位但由于某种原因它不会移动，当页面变长时它会被推开。

<head>
<style>
#donationbutton {
color: blue;
background-color:  yellow;
font-weight: bold;
width: 100px;
padding:10px;
text-align: center;
border: 2px solid black;
border-radius: 25px;
position: relative;
}
</style>
</head>
<body>
<a href="something" style="text-decoration: none;">
<div id="donationbutton">
    DONATE
</div>
</a>
</body>

`

Answer 1

如果您希望它保留在原地，则需要使用position: fixed代替position: relative

#donationbutton {
   color: blue;
   background-color:  yellow;
   font-weight: bold;
   width: 100px;
   padding:10px;
   text-align: center;
   border: 2px solid black;
   border-radius: 25px;
   position: fixed; <--------- 
}

EXAMPLE

只需理解position: fixed从文档流中删除元素，使其不像普通块元素那样行为

Answer 2

position: fixed

正在寻找：http://jsfiddle.net/swm53ran/69/

如何修复div？

2 个答案: