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

前端之家收集整理的这篇文章主要介绍了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最小的长度,所以当窗口很小时,必须水平滚动屏幕.当这种情况发生时,我想要“在我的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的拐角处.

原文链接:https://www.f2er.com/html/231376.html

猜你在找的HTML相关文章