我把一个着名的“我在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上叉我”链接到页面的右上方,而不是窗口.这是现在的样子:
一直向左滚动:
一直向右滚动:
看来,色带放置在初始窗口的右上角,并保持静止.
我想要的是在第一种情况下出现视线,在第二种情况下右上角(当我向右滚动).
编辑:感谢您的快速回答,人们.然而,大多数答案使得色带在页面上水平和垂直滚动.我想要的是将其固定在页面的右上方(而不是浏览器视图),只有当我滚动到它的位置的位置时才会被看到.
解决方法
你可以做一个小技巧,把你的图像放在一个div的最小宽度.
<div style="position:relative;min-width:960px"> <img src="..." style="position: absolute;right:0;top:0" /> </div>
并将该div放在< body>的开头部分.
position:relative使得所有具有position的元素的所有子元素都是绝对的,根据该div而不是整个页面.当视口大于最小宽度时,div与视口的宽度相同.当视口较小时,div将具有最小宽度,并且图像保留在div的拐角处.