我想创建一个按钮,无论我们在页面上滚动多少次,它都保留在屏幕上,就像按钮卡在显示器上一样。有没有办法做到这一点?
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; }
4szc88ey2#
在元素上使用position:fixed;。然后您可以通过设置顶部,右侧,底部或左侧的组合来设置其位置。
position:fixed;
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; }
希望有帮助!
i34xakig4#
使用固定位置,例如:当你有一个
<div class:"fixed-btn"> Fixed button </div>
你的CSS应该是这样的:
.fixed-btn{ position:fixed; top:100px; left:0px; baground:#fff; padding:5px; }
试试看
4条答案
按热度按时间zvokhttg1#
绝对
指示元素是绝对定位的,而其他元素在网页上显示时就像绝对没有定位的元素一样。元素的位置由left,top,right和bottom属性设置,父元素的position属性也会影响位置。所以,如果position的父值设置为static或没有父元素如果父元素的位置值设置为固定、相对或绝对,则坐标从父元素的边缘开始计数。
固定
在它的效果中,这个值接近于绝对值,但与之不同的是,它绑定到屏幕的左、上、右和下属性上指示的点,并且在滚动浏览网页时不改变其位置。如果元素的位置是固定的,并且它不完全适合浏览器窗口,Firefox浏览器根本不显示滚动条。虽然Opera条显示滚动条,它们不影响元件的位置。
相对
元素的位置是相对于其原始位置设置的。添加left、top、right和bottom属性会更改元素的位置,并将其从原始位置向一个方向或另一个方向移动。
静态
项照常显示。使用left、top、right和bottom属性不会产生任何结果。
继承
继承父项的含义。
在你的情况下,'固定'应该工作
HTML:
CSS:
4szc88ey2#
在元素上使用
position:fixed;
。然后您可以通过设置顶部,右侧,底部或左侧的组合来设置其位置。dced5bon3#
您可以使用CSS position属性来实现这一点,在您的情况下,您需要的属性是
position:fixed;
使用这个属性,你可以相对于浏览器的视口来定位一个元素,即使页面被滚动,它也会一直停留在同一个位置。所以简单地说,如果你有一个html元素,你想固定它的位置,只要在css中选择它,给予它
position:fixed;
和相应的左,右,顶,底值来对齐它。HTML
CSS
希望有帮助!
i34xakig4#
使用固定位置,例如:当你有一个
你的CSS应该是这样的:
试试看