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

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

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

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

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

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

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

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

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

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

下面是代码演示



CSDN Wellfancy

#div1 {
width: 200px;
height: 200px;
border: 2px red solid;
position:fixed;/* 将位置设置为层模型 */
right:0;/* 当前元素距离右端的距离 */
bottom:0;/* 当前元素距离底部的距离 */
}


如何设置一个烦人的网页弹窗--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表单标签

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.191.171.8]2022年10月08日 03时13分54秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章

db.stats() 2019-06-23 18:18:30
这个怎么没有显示呢 2019-06-23 18:18:29
MySQL的复制原理及配置 2019-06-23 18:18:29
我的友情链接 2019-06-23 18:18:29
***样例 2019-06-23 18:18:29
java Map 怎么遍历 2019-06-23 18:18:28
Shell学习#数组 2019-06-23 18:18:28
python类继承与子类实例初始化用法 2019-06-23 18:18:28
web服务器并发压力测试 2019-06-23 18:18:27
输完密码回车提交表单 2019-06-23 18:18:27
一种简单的扇形判定算法 2019-06-23 18:18:27
JS 操作节点 2019-06-23 18:18:26
重构-改善既有代码的设计-重新组织数据 2019-06-23 18:18:26
关于tty驱动从linux2.6.30版本移植到linux2.6.14的问题 2019-06-23 18:18:25
raid 2019-06-23 18:18:25
explode和strtok 2019-06-23 18:18:24
如何设计软件程序的启动画面----visual c篇 2019-06-23 18:18:24
了解消息队列中间件——RabbitMQ 2019-06-23 18:18:24
vi编辑器打开文件,如何直接到最后一行? 2019-06-23 18:18:23
MongoDB的启动和停止脚本 2019-06-23 18:18:23