Question

我在我的一个项目中添加了着名的“我在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具有最小长度，因此当窗口较小时，必须水平滚动屏幕。当发生这种情况时，我希望“我在Github上的叉子”链接粘在页面的右上角，而不是窗口。这就是它现在的样子：

一直向左滚动：
enter image description here

向右滚动：
enter image description here

似乎色带位于初始窗口的右上侧，并保持静止。我想要的是它在第一种情况下不在视线范围内，在第二种情况下是右上角（当我向右滚动时）。

修改：感谢您的快速回答。但是，大多数答案使功能区与页面水平和垂直滚动。我想要的是它被固定在页面的右上方（不是浏览器视图），只有当我滚动到它的位置时才能看到它。

Answer 1

你可以做一个小技巧并将你的图像放入一个最小宽度的div。

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

并将该div放在<body>部分的开头。

position:relative根据那个 div而不是整页，使position:absolute元素的所有子元素都处于绝对位置。当视口大于min-width时，div与视口的宽度相同。当视口较小时，div将具有最小宽度，图像保持在div的角落。

Answer 2

两种选择

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

<img style="position: fixed; top: 0; right: 0; border: 0;"

坚持容器：如果你想让它粘在一个容器上（所以当你向左浏览时你看不到它）使用绝对但是做容器位置：相对所以它的包含块是目标

如果您不想在向左滚动时看到图像，请使用此容器的显式宽度我正在谈论这是一个JSFiddle示例。

我使用了平方div而不是图像。 CSS代码如下：

#container {
   width: 700px;
   height: 700px;
   background: #55ff90;
   position: relative;
}

#image {
   width: 70px;
   height: 60px;
   background: #ffff90;
   position: absolute;
   top: 0px;
   right: 0px;
}

Answer 3

如果它应该仅在水平滚动上粘在右上方，则无法使用基本CSS实现此目的。你的要求是坚持水平滚动的右上方，而不是垂直滚动。可以使用position: fixed;来完成要求的第一部分，尽管这会破坏第二部分。

如何使用相对浮点数始终坚持网站的右上角：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; 
}

Answer 4

如果需要，您应该使用float:right，调整margin，例如：margin-right: 5px。干杯:)

Answer 5

如果我理解你想要的是什么，你希望图像粘在窗户的顶角，直到窗口达到一定的尺寸（水平），然后粘住。

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

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

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

DEMO FIDDLE

DEMO FULLSCREEN

您也可以选择使用min-width的容器div。

Answer 6

将position: absolute;更改为position: fixed。

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

使对象粘贴到页面的右上角

6 个答案: