Html 使对象粘在页面的右上角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16610871/
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
Make an object stick to the top-right side of the page
提问by Amir Rachum
I added the famous "Fork me on Github" ribbon to one of my projects. The tag looks like this:
我在我的一个项目中添加了著名的“在 Github 上分叉我”功能区。标签看起来像这样：
<a href="https://github.com/Nurdok/htmlify">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
It looks great, but some of the divs on my webpage have minimum length, so when the window is small, one has to horizontally scroll the screen. When that happens, I want the "Fork me on Github" link to stick to the top-right side of the page, not the window. This is how it looks right now:
看起来不错，但是div我网页上的一些s 有最小长度，所以当窗口很小时，必须水平滚动屏幕。发生这种情况时，我希望“在 Github 上分叉我”链接贴在页面的右上角，而不是窗口。这是它现在的样子：
Scrolled all the way to the left:
一直向左滚动：
Scrolled all the way to the right:
一直向右滚动：
It seems that the ribbon is placed on the top-right side of the initial window, and stays static. What I want is for it to be out of sight in the first case and top-right in the second case (when I scroll to the right).
似乎功能区位于初始窗口的右上角，并保持静止。我想要的是在第一种情况下它不在视线范围内，而在第二种情况下则在右上角（当我向右滚动时）。
Edit: Thanks for the quick answers, people. However, most of the answers made the ribbon scroll horizontally and vertically with the page. What I want is for it to be fixed on the top-right side of the page (notthe browser view), and only be seen if I scroll to where its position is.
编辑：感谢您的快速回答，人们。但是，大多数答案都使功能区随页面水平和垂直滚动。我想要的是将它固定在页面的右上角（不是浏览器视图），并且只有在我滚动到它的位置时才能看到。
回答by Wiktor
You can do a little trick and put your image into a div which has minimal-width.
你可以做一个小技巧，把你的图像放到一个最小宽度的 div 中。
<div style="position:relative;min-width:960px">
<img src="..." style="position: absolute;right:0;top:0" />
</div>
and put that div at the beginning of <body>section.
并将该 div 放在<body>部分的开头。
position:relativemakes that all children of that elements that have position:absoluteare positioned absolute according to thatdiv, not whole page. When viewport is bigger than min-width, the div is the same width as the viewport. When the viewport is smaller, the div will have the min-width and the image stays at the corner of the div.
position:relative使该元素的所有子元素position:absolute根据该div 而不是整个页面被定位为绝对。当视口大于 时min-width，div 与视口的宽度相同。当视口较小时，div 将具有 min-width 并且图像停留在 div 的角落。
回答by Fico
Two alternatives
两种选择
- Sticking to the Viewport: To stick it to the viewport you should position your element "fixed" instead of "absolute"
- 坚持视口：要将其坚持视口，您应该将元素定位为“固定”而不是“绝对”
<img style="position: fixed; top: 0; right: 0; border: 0;"
- Sticking to a Container: And if you want it to be sticked to a container (so youn dont see it when you browse left) use absolute but do that container position:relative so its containing block is targeted
- 贴在容器上：如果您希望将其贴在容器上（这样您在向左浏览时就看不到它），请使用绝对值，但要使用该容器位置：相对，以便定位其包含块
If you dont want to see the image when scrolling leftthen use a explicit width for this container I am talking about Here is a JSFiddleexample.
如果你不想在向左滚动时看到图像，那么我正在谈论的这个容器使用显式宽度 这是一个JSFiddle示例。
I used a squared div instead of an image. CSS code as follows:
我使用平方 div 而不是图像。CSS代码如下：
#container {
width: 700px;
height: 700px;
background: #55ff90;
position: relative;
}
#image {
width: 70px;
height: 60px;
background: #ffff90;
position: absolute;
top: 0px;
right: 0px;
}
回答by Menno
In case it's supposed to stick to the right top on horizontal scroll only, you can't accomplish this with basic CSS. Your requirement is stick to the right top for horizontal scroll but not vertical scroll. The first part of the requirement can be accomplished using position: fixed;though this breaks the second part.
如果它应该仅在水平滚动时粘在右上方，则无法使用基本 CSS 来完成此操作。您的要求是坚持水平滚动的右上方，而不是垂直滚动。使用要求的第一部分可以完成，position: fixed;尽管这会破坏第二部分。
How about always sticking to the right top of the website using a relative float: Fiddle
如何始终使用相对浮动坚持网站的右上方：Fiddle
<div id='container'>
<div id='sticky'>x</div>
</div>
#sticky {
width: 100px;
height: 100px;
background: red;
float: right;
}
#container {
width: 100%;
height: 200px;
background: blue;
}
回答by konnigun
You should use float:right, adjusting marginif you need, e.g.: margin-right: 5px. Cheers :)
您应该使用float:right，margin根据需要进行调整，例如：margin-right: 5px。干杯:)
回答by Carrie Kendall
If I understand what you want correctly, you'd like for the image to stick to the top corner of the window UNTIL the window gets to a certain size (horizontally) and then stick.
如果我正确理解您想要什么，您希望图像粘在窗口的顶角，直到窗口达到一定大小（水平）然后粘住。
If so, here is a plausible solution:
如果是这样，这是一个合理的解决方案：
body{
min-width:1000px; /* or whatever you need it to be */
}
#ribbon{
position:relative;
float:right;
}
You can also use a container div with min-width, your choice.
您还可以根据min-width您的选择使用容器 div 。
回答by RaphaelDDL
Change position: absolute;to position: fixed.
更改position: absolute;为position: fixed。
As side note, put the style on the ainstead of the image and add some z-indexto make sure it stays on top of everything else:
作为旁注，将样式放在a而不是图像上并添加一些z-index以确保它位于其他所有内容之上：
<a href="https://github.com/Nurdok/htmlify" style="position: fixed; top: 0; right: 0; border: 0; z-index: 999; display: block;">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
