使对象粘贴到页面的右上角
我在我的一个项目中加入了着名的"我在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具有最小长度,因此当窗口很小时,必须水平滚动屏幕.当发生这种情况时,我希望"将我放在Github上"链接粘在页面的右上方,而不是窗口.这就是它现在的样子:
向左滚动:
向右滚动:
似乎色带放在初始窗口的右上侧,并保持静止.我想要的是它在第一种情况下不在视线范围内,在第二种情况下是右上角(当我滚动到右边时).
编辑:谢谢你的快速回答,人们.但是,大多数答案使功能区与页面水平和垂直滚动.我想要的是将它固定在页面的右上角(而不是浏览器视图),只有当我滚动到它的位置时才能看到它.
Wik*_*tor 19
你可以做一个小技巧,把你的图像放入一个最小宽度的div.
<div style="position:relative;min-width:960px">
<img src="..." style="position: absolute;right:0;top:0" />
</div>
并将该div放在<body>部分的开头.
position:relativeposition:absolute根据该 div而不是整页,使所有元素的子元素都被置于绝对位置.当视口大于时min-width,div与视口的宽度相同.当视口较小时,div将具有最小宽度,图像保持在div的角落.
两种选择
- 坚持视口:要将其粘贴到视口,您应该将元素定位为"固定"而不是"绝对"
<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;
}