19

我在我的一个项目中添加了著名的“Fork me on 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”链接贴在页面的右上角，而不是窗口。这是它现在的样子：

一直向左滚动：
在此处输入图像描述

一直向右滚动：
在此处输入图像描述

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

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

4

6 回答 6

23

你可以做一个小技巧，把你的图片放到一个宽度最小的 div 中。 

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

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

position:relative使该元素的所有子元素都position:absolute根据该div 定位，而不是整个页面。当 viewport 大于min-width时，div 与 viewport 的宽度相同。当视口较小时，div 将具有最小宽度，并且图像停留在 div 的角落。

于 2013-05-17T14:05:16.717 回答
12

两种选择

  1. 坚持视口：要将其坚持视口，您应该将元素定位为“固定”而不是“绝对”
<img style="position: fixed; top: 0; right: 0; border: 0;"
  1. 坚持一个容器：如果你希望它被坚持到一个容器上（所以当你向左浏览时你看不到它）使用绝对的，但是做那个容器位置：相对所以它的包含块是有针对性的

如果您不想在向左滚动时看到图像，请为我正在谈论的这个容器使用显式宽度 这是一个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;
}
于 2013-05-17T14:01:11.310 回答
2

如果它应该只在水平滚动时粘在右上角，你不能用基本的 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; 
}
于 2013-05-17T14:13:48.487 回答
1

如果需要，您应该使用float:right, 进行调整，例如： . 干杯:)marginmargin-right: 5px

于 2013-05-17T14:20:43.927 回答
1

如果我正确理解您想要的内容，您希望图像贴在窗口的上角，直到窗口达到一定大小（水平）然后粘住。

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

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

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

演示小提琴

演示全屏

您还可以将容器 div 与min-width您的选择一起使用。

于 2013-05-17T14:36:52.417 回答
0

更改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>
于 2013-05-17T14:02:21.737 回答