Html 将对象粘贴到页面的右上角

我在我的一个项目中添加了著名的“在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>

它看起来很棒，但我网页上的一些

div

s具有最小长度，因此当窗口很小时，必须水平滚动屏幕。当这种情况发生时，我希望“Fork me on Github”链接粘贴到页面的右上角，而不是窗口。这就是它现在的样子：

一直向左滚动：

一直向右滚动：

功能区似乎放置在初始窗口的右上侧，并保持静态。 我想要的是它在第一种情况下不可见，在第二种情况下位于右上角（当我向右滚动时）

---

编辑：谢谢大家的快速回答。然而，大多数答案使功能区与页面水平和垂直滚动。我想要的是将其固定在页面的右上角（而不是浏览器视图），并且只有当我滚动到其位置时才能看到它。

两种选择

粘贴到视口：要将其粘贴到视口，应将元素定位为“固定”而不是“绝对”

---

改变

位置：绝对到
位置：固定

作为旁注，将样式放在
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>

你可以做一个小把戏，把你的图像放到一个最小宽度的div中

<div style="position:relative;min-width:960px">
 <img src="..." style="position: absolute;right:0;top:0" />
</div>



并将该div放在
部分的开头

position:relative
使具有
position:absolute
的元素的所有子元素都根据而不是整个页面定位为绝对。当视口大于
最小宽度时，div与视口的宽度相同。当视口变小时，div将具有最小宽度，并且图像保持在div的拐角处。
如果它仅在水平滚动时停留在右上角，则基本CSS无法完成此操作。您的要求是水平滚动时保持在右上角，而不是垂直滚动。需求的第一部分可以使用
位置完成：固定尽管这打断了第二部分

如何使用相对浮动始终保持在网站的右上方：


x
#粘性{
宽度：100px；
高度：100px；
背景：红色；
浮动：对；
}
#容器{
宽度：100%；
高度：200px；
背景：蓝色；
}
您应该使用
浮动：右侧
，根据需要调整
边距
，例如：
边距右侧：5px
。干杯：）
如果我理解正确，您希望图像粘贴到窗口的上角，直到窗口达到一定大小（水平），然后再粘贴

如果是这样，这里有一个合理的解决方案：

body{
    min-width:1000px; /* or whatever you need it to be */
}

#ribbon{
    position:relative;
    float:right;
}



您也可以使用宽度为
最小值的容器div，由您选择。
它是页面正文中的第一个元素，还是另一个元素的子元素？它是子元素，但可以是答案所说的任何内容。@AmirRachum，我的答案应该是正确的，但是被否决了我不知道为什么：）@Wiktor我的答案也是如此（包括小提琴）一定有人在周围打转……如果有人垂直滚动，它将始终可见。明白了。请看我的答案。我包括了一把小提琴。有一把小提琴显示了它是如何工作的。请向投票被否决的任何人解释原因。请注意，
position:fixed
在手机上的工作方式有点不同-你会采取行动的请参见图像“跳跃”释放手指后，不要像在普通网络上那样在滚动时移动。@hexblot必须注意，
fixed
只在iOS 5+上工作，并且像你说的那样有bug。我在滚动时一直闪烁。只有在iOS6+上，苹果才修复了
fixed
以使滚动时更平滑。
z-index
提示+1-使用combinat使用公认的解决方案，ion解决了我的问题。谢谢！我希望它贴在页面的右上角并保持在原位。除非我能看到页面的右上角，否则我不应该看到它。如果你跟随小提琴，你会看到它始终贴在网站的右上角，这是你的要求？它贴在页面的右上角浏览器窗口，而不是页面。我不是向下投票人…我只是想解释为什么这不适合我的需要。你是对的，阿米尔，修复了它。注意，这不需要位置，这在我看来是一个加号。通过正确选择
min width
值，这解决了我的问题。我不知道为什么会被向下投票。它解决了我的问题m也..只是想让它在整个分区中透明。你也可以做固定位置。然后根据窗口的分辨率，它不会有任何问题。有时不需要标签。
<div style="position:relative;min-width:960px">
 <img src="..." style="position: absolute;right:0;top:0" />
</div>

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

body{
    min-width:1000px; /* or whatever you need it to be */
}

#ribbon{
    position:relative;
    float:right;
}