本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!