如何设置一个烦人的网页弹窗--CSS层模型之固定定位
发布日期:2022-02-28 20:48:34 浏览次数:27 分类:技术文章

本文共 977 字,大约阅读时间需要 3 分钟。

大家在浏览许多网页时,是否遇到过右下角的弹窗小广告?

“大渣好,我系轱天乐,我四渣渣辉,探挽懒月,介四里没有挽过的船新版本,挤需要体验三番钟,里造会干我一样,爱象节款游戏......”

即使我们滚动屏幕,它也在那一动不动,这是为什么呢?它是怎样做到的呢?

----其实它是利用了层模型的固定定位

我们常看到的形式可能如下.....

 其实只要简单的几行代码即可完成这个操作

position:fixed;/* 将位置设置为层模型 */top:100px;/* 当前元素距离顶部的距离 */right:0;/* 当前元素距离右端的距离 */bottom:0;/* 当前元素距离底部的距离 */left:100px;/* 当前元素距离左端的距离 */

如果想要做出上图一样紧贴右下角的形式,设置right和bottom为0即可,top和left可以不写。

下面是代码演示

    
CSDN Wellfancy

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

如何设置一个烦人的网页弹窗--CSS层模型之固定定位

这样就可以设置一个紧贴右下角的烦人的小广告了!

转载地址:https://blog.csdn.net/weixin_53379398/article/details/119045283 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:制作网页时,如何让元素或盒子居中显示
下一篇:与用户的交互--HTML表单标签

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年03月11日 23时37分33秒