javascript 如何创建保留在页面上且不受滚动影响的HTML元素?

y4ekin9u  于 2023-04-19  发布在  Java
关注(0)|答案(4)|浏览(117)

我想创建一个按钮,无论我们在页面上滚动多少次,它都保留在屏幕上,就像按钮卡在显示器上一样。有没有办法做到这一点?

zvokhttg

zvokhttg1#

绝对

指示元素是绝对定位的,而其他元素在网页上显示时就像绝对没有定位的元素一样。元素的位置由left,top,right和bottom属性设置,父元素的position属性也会影响位置。所以,如果position的父值设置为static或没有父元素如果父元素的位置值设置为固定、相对或绝对,则坐标从父元素的边缘开始计数。

固定

在它的效果中,这个值接近于绝对值,但与之不同的是,它绑定到屏幕的左、上、右和下属性上指示的点,并且在滚动浏览网页时不改变其位置。如果元素的位置是固定的,并且它不完全适合浏览器窗口,Firefox浏览器根本不显示滚动条。虽然Opera条显示滚动条,它们不影响元件的位置。

相对

元素的位置是相对于其原始位置设置的。添加left、top、right和bottom属性会更改元素的位置,并将其从原始位置向一个方向或另一个方向移动。

静态

项照常显示。使用left、top、right和bottom属性不会产生任何结果。

继承

继承父项的含义。
在你的情况下,'固定'应该工作
HTML:

<div class="fix_block">Fixed block</div>

CSS:

.fix_block {
    position: fixed; 
    top: 100px; 
    left: 30px; 
    padding: 20px; 
    border: 1px solid #000;
}
4szc88ey

4szc88ey2#

在元素上使用position:fixed;。然后您可以通过设置顶部,右侧,底部或左侧的组合来设置其位置。

dced5bon

dced5bon3#

您可以使用CSS position属性来实现这一点,在您的情况下,您需要的属性是position:fixed;
使用这个属性,你可以相对于浏览器的视口来定位一个元素,即使页面被滚动,它也会一直停留在同一个位置。所以简单地说,如果你有一个html元素,你想固定它的位置,只要在css中选择它,给予它position:fixed;和相应的左,右,顶,底值来对齐它。
HTML

<div class="fixed_div">I am fixed!</div>

CSS

.fixed_div {
    position: fixed; 
    top: 40%; 
    left: 40%; 
    padding: 10px; 
    border: 2px solid red;
}

希望有帮助!

i34xakig

i34xakig4#

使用固定位置,例如:当你有一个

<div class:"fixed-btn"> Fixed button </div>

你的CSS应该是这样的:

.fixed-btn{
       position:fixed;
       top:100px;
       left:0px;
       baground:#fff;
       padding:5px;
    }

试试看

相关问题