HTML 固定div于页面固定位置,实现悬浮按钮

2019/5/23补充

css实现按钮固定在底部

按钮固定在底部

css:

<style>
.bottom{position:fixed; bottom:0;}
</style>

html:

<div>
    <div class="bottom">
        <input type="submit" value="底部按钮"  class=""/>
    </div>
</div>

 


 

一个小需求,页面过长,业务希望将按钮悬浮于页面上,不要一下拉就盖掉操作按钮。

代码如下:

div position参数设置为fixed 其相对于浏览器为绝对位置,通过设置right和top将div固定在右上角。

table position参数设置为absolute,其相对于第一层div绝对定位,通过设置right和top将table固定在div容器的右上角

<div id="dg" style="z-index: 9999; position: fixed ! important; right: 0px; top: 0px;">
<table width=""100% style="position: absolute; width:260px; righ
  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
如果你想在 HTML 页面上滚动时让某个 `div` 的位置悬浮不变,可以使用 CSS 中的 `position: fixed;` 属性来实现。这个属性会让元素的位置相对于浏览器窗口固定不变,而不是相对于文档流的位置。 下面是一个示例代码,展示如何使用 `position: fixed;` 来让一个 `div` 的位置悬浮不变: ```html <!DOCTYPE html> <html> <head> <style> #fixed-div { position: fixed; top: 10px; right: 10px; width: 200px; height: 100px; background-color: lightblue; } </style> </head> <body> <div id="fixed-div"> 这个 div位置会在页面滚动时悬浮不变。 </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nunc rhoncus, viverra mauris eu, cursus ipsum. Nam eu sodales mauris. Maecenas at sodales ipsum. Sed ut eros vel diam consequat commodo. Ut elit velit, congue eget orci nec, pharetra hendrerit elit. Ut bibendum convallis nisi, sit amet finibus ex bibendum a. Nulla facilisi. Aenean euismod enim vel risus imperdiet euismod. Curabitur euismod tincidunt neque, nec elementum lorem. </p> <p> Mauris eget massa enim. Nullam at tellus vel ex sagittis suscipit. Sed nec tellus eu quam lobortis dignissim. Morbi eget diam id felis semper semper. Nunc pulvinar, nunc quis interdum suscipit, nisl quam accumsan enim, ut viverra magna libero in sapien. Fusce aliquam vestibulum orci, id tempor lorem viverra eu. Proin interdum, mauris vitae faucibus malesuada, augue nibh feugiat tellus, sed varius purus arcu vel turpis. Sed eget ante quis felis lacinia commodo. </p> <p> Integer et magna at orci bibendum efficitur. Suspendisse iaculis congue justo, vel rutrum enim fringilla eu. Fusce pellentesque euismod lorem, eu scelerisque purus malesuada vel. Sed sit amet nisi dignissim, lacinia mauris nec, varius elit. Nulla facilisi. Etiam maximus, velit vel rhoncus consequat, ex arcu imperdiet arcu, eu bibendum nulla metus vel orci. Maecenas bibendum, mauris eget rutrum egestas, mi odio tempus nisi, ac viverra purus sem id velit. </p> </body> </html> ``` 在上面的代码中,我们创建了一个 `div` 元素,并把它的 `position` 属性设置为 `fixed`,这样它的位置就会固定在浏览器窗口的右上角。在这个例子中,我们还设置了 `top` 和 `right` 属性来调整 `div` 元素的位置

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dove言和

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值