CSS 将 DIV 固定到右下角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1697545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fix DIV to bottom right corner
提问by user195257
I have used htmland bodyattributes to have a gradient backgroundand a flower backgroundfor my website.
我已经使用html和body属性为我的网站设置了渐变background和花朵。background
I have also used a divto have the bottom right hand flower where it is. Works great, but not when scrolling. How do i get the bottom right hand corner image to stick to the bottom of the screen ?
我还使用了 adiv将右下角的花放在了它所在的位置。效果很好，但在滚动时不行。如何让右下角的图像粘在屏幕底部？
回答by stephenhay
You will want to set position: fixed;instead of position: absolute;.
您将需要设置position: fixed;而不是position: absolute;.
Here's more infoon the PositionProperty.
这是有关该物业的更多信息Position。
.bottomright {
position: fixed;
bottom: 0px;
right: 0px;
}
.demo {
background-color: HotPink;
padding: 20px;
margin: 5px;
}Hello<br>
<div class="demo bottomright">
I'm a Div!
</div>
there回答by Joe Morris
if you put the flower inside a div and position it absolute bottom and right this will stick it there.
如果你把花放在一个 div 中并将它放在绝对底部和右边，这将把它粘在那里。
For example, something like this will work
例如，这样的事情会起作用
#mystylename{
position:absolute;
bottom:0;
right:0;
}
you may need to tweak it to get it sat where you want and also maybe add a z-index
您可能需要调整它以使其位于您想要的位置，并且还可能添加一个 z-index
回答by Oliver M Grech
If you require animation, set you div as absolute before the animation and then after the animation re set it to fixed as the below example.
如果您需要动画，请在动画之前将 div 设置为绝对，然后在动画之后将其重新设置为固定，如下例所示。
$('.mydiv').animate({
opacity: 1,
right: "50px",
bottom: "50px",
height: "toggle"
}, 1000, function() {
// Animation complete.
}).css('position','fixed');
css for the above div is below as well.
上面 div 的 css 也在下面。
.mydiv {
text-align: center;
background: #00DD88;
background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent;
border-radius: 30px 30px 30px 30px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
margin: 5px 0 10px 15px;
position: absolute;
right: -980px;
width: 200px;
height: 50px;
display: none;
z-index: 100;
}
I know this is old but it will definitely help someone :)
我知道这是旧的，但它肯定会帮助某人:)
回答by TrophyGeek
A css-only trick for this old post is to put a after the div and position the top -1.2em so it overlaps the bottom of the element above it.
这篇旧帖子的一个 css-only 技巧是在 div 之后放置一个，并定位顶部 -1.2em，使其与上方元素的底部重叠。
html:
html：
<textarea class="no-whitespace-right">This is a test resize it.</textarea>
<span class="float-lower-left">length could go here</span>
css:
css：
.no-whitespace-right {
/* any whitespace to the right and the overlap trick fails */
width: 100%;
}
.float-lower-left {
position: relative;
float: right;
right: 1em;
top: -1.2em;
/* push it up into the element before it. This is a trick for bottom-right */
right: 1em;
z-index: 200;
opacity: 0.5;
font-weight:bolder;
}
回答by jkndrkn
You might need to use JavaScript to accomplish this task. Such techniques will accomplish the effect you desire, but they tend not be animate very smoothly. When scrolling, such a "stuck" object will tend to skip and stutter. I found an example herebut have not tried it myself. I recommend searching for a few examples and trying out the one that looks cleanest and most modern.
您可能需要使用 JavaScript 来完成此任务。此类技术将实现您想要的效果，但它们的动画效果往往不是很流畅。滚动时，这种“卡住”的对象会倾向于跳过和卡顿。我在这里找到了一个例子，但我自己没有尝试过。我建议搜索一些示例并尝试看起来最干净和最现代的示例。
回答by user2654735
You will want to set position: fixed; instead of position: absolute;
您将要设置位置：固定；而不是位置：绝对；
