使用position: fixed实现右下角浮动广告,通过HTML搭建结构,CSS设置固定定位、阴影、圆角及悬停效果,并用JavaScript添加关闭功能,结合媒体查询适配移动端,确保z-index足够高以避免遮挡。
浮动广告在网页中很常见,比如右侧固定客服栏、底部悬浮推广等。实现这类效果的核心是CSS的position属性。下面通过一个实战案例,教你如何使用position轻松实现一个右下角浮动广告。
先写一个简单的HTML结构,包含一个用于展示广告的容器:
@@##@@
使用position: fixed让广告相对于浏览器窗口固定位置,不会随页面滚动而消失。
.floating-ad {
position: fixed;
right: 20px;
bottom: 30px;
width: 250px;
height: auto;
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-radius: 8px;
z-index: 1000;
transition: transform 0.3s ease;
}
.floating-ad:hover {
transform: scale(1.
05);
}
.floating-ad img {
width: 100%;
height: auto;
display: block;
border-radius: 8px 8px 0 0;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background: #fff;
border: none;
font-size: 16px;
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
opacity: 0.7;
}
.close-btn:hover {
opacity: 1;
background: #f0f0f0;
}
用JavaScript实现点击“✕”关闭广告:
document.querySelector('.close-btn').addEventListener('click', function() {
document.querySelector('.floating-ad').style.display = 'none';
});
这样用户点击后广告会隐藏,提升体验。
在小屏幕上,固定定位可能影响操作。可以加个媒体查询调整位置或隐藏:
@media (max-width: 480px) {
.floating-ad {
width: 200px;
right: 10px;
bottom: 10px;
}
}
基本上就这些。用position: fixed配合right和bottom就能快速实现右下角浮动广告,加上阴影、动画和关闭按钮后更实用。关键是z-index要足够高,确保不被其他元素遮挡。
# css
# javascript
# java
# html
# 浏览器
# position属性
# 固定定位
相关栏目:
【
Google疑问12 】
【
Facebook疑问10 】
【
网络优化76771 】
【
技术知识130152 】
【
IDC云计算60162 】
【
营销推广131313 】
【
AI优化88182 】
【
百度推广37138 】
【
网站推荐60173 】
【
精选阅读31334 】
相关推荐:
Go 语言标准库为何不提供泛型切片的 Contains 方法?
c++中的可变参数模板(variadic templates)怎么用_c++模板编程黑魔法【C++11】
Linux怎么禁止Root用户远程登录_Linux系统SSH加固与安全设置【教程】
如何在Golang中捕获JSON序列化错误_Golangjson.Marshal错误处理示例
php订单日志怎么按状态筛选_php筛选不同状态订单日志教程【教程】
如何在Golang中实现自定义Benchmark_Golang testing.B自定义性能测量示例
Go 中实现 Python urllib.quote() 等效功能的正确方式
Win11如何更改用户账户文件夹名称 Win11修改C:Users用户名【终极教程】
如何诊断并终止卡死的 multiprocessing 子进程
Win11如何设置开机自动联网 Win11宽带连接自动拨号【步骤】
php能跑在stm32上吗_php在stm32微控制器上的移植方法【介绍】
Python生成器表达式内存优化_惰性计算说明【指导】
如何测试您的网站全球打开速度-网站海外测速工
PHP主流架构怎么监控运行状态_工具推荐【操作】
英国搜索:多数英国人认为语言搜索是未来搜索
Win10怎样清理C盘阿里旺旺缓存_Win10清理阿里旺旺缓存步骤【步骤】
Mac如何解压zip和rar文件?(推荐免费工具)
php订单日志怎么记录物流_php记录订单物流变更日志指南【指南】
Mac怎么开启“任何来源”_Mac安装未签名应用的设置方法【解决】
Win11时间不对怎么同步_Win11自动校准互联网时间【设置】
如何在 Go 中判断变量是否为函数类型
如何使用Golang模拟请求超时_Golang context与HTTP请求测试实践
MAC如何设置网卡MAC地址克隆_MAC终端修改物理地址与环境模拟【教程】
Win11怎么关闭定位服务 Win11禁止应用获取位置信息【隐私】
Mac怎么安装软件_Mac安装dmg与pkg文件的区别【指南】
使用类变量定义字符串常量时如何实现类型安全的 Literal 注解
Win11怎样激活系统密钥_Win11系统密钥激活步骤【攻略】
Windows 10怎么隐藏特定更新补丁_Windows 10使用微软官方工具wushowhide.diagcab
c++输入输出流 c++ cin与cout格式化输出【方法】
Win11怎么开启智能存储_Windows11存储感知自动清理文件
Windows10电脑怎么设置自动连接WiFi_Win10无线网络属性勾选
C++如何编写函数模板?(泛型编程入门)
c# 在高并发下使用反射发射(Reflection.Emit)的性能
Windows 11登录时提示“用户配置文件服务登录失败”怎么办_Windows 11修复损坏的用户配置文件
Win11任务栏怎么固定应用 Win11将软件图标固定到底部【步骤】
Win11怎么更改文件夹图标_自定义Win11文件夹外观样式【详解】
Win11如何设置鼠标灵敏度_Win11鼠标灵敏度调整教程【攻略】
Mac版Final Cut Pro入门_Mac视频剪辑基础操作【教程】
Python装饰器设计思路_功能增强机制说明【指导】
php条件判断怎么写_ifelse和switchcase的使用区别【对比】
php485能和物联网模块通信吗_php485对接NB-IoT模块实例【说明】
Windows任务计划服务异常原因_任务调度失败的处理方案
Python邮件系统自动化教程_批量发送解析与模板应用
Windows电脑如何截屏?(四种快捷方法)
Win11怎么恢复出厂设置_Win11重置此电脑保留文件方法【详解】
php报错怎么查看_定位PHP致命错误与警告的方法【教程】
如何在Golang中处理模块冲突_解决依赖版本不兼容问题
Win10怎么更改用户名 Win10修改账户名称操作教程
c++20的std::format怎么用 比printf更安全高效的格式化方法【详解】
php中常量能用::访问吗_类常量与作用域操作符使用场景【汇总】
2025-11-05
致胜网络推广营销网专注海外推广十年,是谷歌推广.Facebook广告全球合作伙伴,我们精英化的技术团队为企业提供谷歌海外推广+外贸网站建设+网站维护运营+Google SEO优化+社交营销为您提供一站式海外营销服务。