html页面图片浮动置顶

创建一个图片

<div class="fixed-bottom-right" 
style="

display: flex;
position: fixed;
top: 80%;
right: 0;
width: 100px;
height: 100px;
z-index: 999;
transform: translate(-50%,-50%);
"> 

	<img src="static\picture\about.jpg" />
</div>


width: 100px;设置长度
height: 100px;设置宽度
z-index:999,z-index属性用于控制元素的堆叠顺序，数值越大的元素会放在前面。将图片容器的z-index设为1，以确保其位于其他元素之上。
transform:translate(-50%,-50%),即延X轴和延Y轴均移动50%。（原图大小的50%）
display: flex;意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。
position: fixed;表示该元素相对于浏览器窗口固定位置。
top: 50%;距离顶部50%
right: 0;距离右边0

可以了。