微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

通过定位实现的div块网页中固定效果_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:29:40
原创
1291人浏览过

通过定位实现的div块网页中固定效果:
本章节介绍一下如何让通过定位方式让一个div定位于网页的一个位置，无论是否拖动滚动条。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> body{   margin:0px auto;  height:1000px;} #fixedLayer{   position:fixed;   left:40px;   top:10px;   width:100px;   line-height:30px;   background:#FC6;   border:1px solid #F90; } </style> </head> <body> <div id="fixedLayer">蚂蚁部落</div>  </body> </html>
登录后复制

以上代码实现了我们的要求，这里是用过设置元素position:fixed，不过IE6不支持，不过本人感觉IE6还需要考虑吗。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13917

更多内容可以参阅:http://www.softwhy.com/divcss/

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：meta name="viewport" content="width=device-width,initial-scale=1.0" 解释_html/css_WEB-ITnose 下一篇：鼠标移到元素上指针变为不可用状态_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML5代码如何实现文件上传 HTML5代码中File API的运用解析 使用FileAPI可实现文件读取与上传，通过input选择文件，FileReader读取内容并预览；2.支持图片预览、多文件处理及FormData异步上传。
2025-11-12 22:57:17
965
如何解决Vim HTML插件冲突的处理方法 首先确认冲突插件，如html5.vim与vim-polyglot；通过注释、:scriptnames和:verbosesetfiletype?排查；使用插件管理器控制加载顺序，如先载入vim-polyglot再加载emmet-vim；禁用重复功能，如设置g:polyglot_disabled=[‘html’]；通过autocmd按需加载并清除冗余映射，确保各插件协同工作。
2025-11-12 22:55:10
967
前台html如何显示_前端HTML页面显示与渲染优化方法 优化前端HTML渲染需缩短关键渲染路径，内联核心CSS、移除冗余代码、延迟非关键JS；预加载重要资源；简化DOM结构；压缩合并文件；使用高效CSS选择器；懒加载非首屏内容。
2025-11-12 22:52:02
451
html5怎么上传图片显示_HTML5图片预览与上传实现 使用input[type=file]选择图片，通过FileReader读取文件并预览；2.将文件转为base64显示在img标签中；3.用FormData和fetch将文件上传至服务器；4.可添加文件校验、多图上传和样式优化提升体验。
2025-11-12 22:49:02
535
html头部链接怎么打_html头部链接如何打专业教程 头部链接用于引入CSS、favicon、预加载资源等；2.使用标签设置rel属性实现不同功能；3.正确路径与属性配置确保资源正常加载与性能优化。
2025-11-12 22:39:02
637
html源码如何保存为静态网页_html源码保存为静态网页的方法 首先将HTML源码保存为.html文件，可通过文本编辑器、浏览器开发者工具、另存为功能或命令行工具实现，确保文件正确命名并包含所有资源。
2025-11-12 22:33:02
131
html模板转换器_html模板转换网页版平台 答案：https://www.htmleasyconvert.com是一个在线HTML模板转换平台，支持将静态HTML转为响应式网页，提供可视化编辑、多设备适配、一键导出代码包及批量处理功能，无需安装软件即可在线操作。
2025-11-12 22:27:02
298
HTML5在线如何优化页面加载速度 HTML5在线性能提升的实用策略 压缩合并CSS、JS和图片，减少资源体积与HTTP请求；2.启用Gzip/Brotli压缩及WebP格式，提升传输效率；3.使用懒加载与响应式图片优化图像加载；4.设置缓存头、ServiceWorker和本地存储增强缓存；5.减少DOM操作、使用CSS3动画和requestAnimationFrame优化渲染。
2025-11-12 22:25:02
1002
如何使用HTML构建新闻列表页面的详细教程 神舟二十号因太空碎片撞击推迟返回，中国航天从容应对。太空碎片威胁巨大，而中国早已为此做好长期准备，展现了成熟的太空应急能力。
2025-11-12 22:23:08
130
如何通过HTML5 Figure元素标注图片的详细步骤 答案：使用figure元素标注独立内容并配合figcaption添加说明。1.用figure包裹img表示独立内容；2.在figure内添加figcaption描述图片，通常置于下方；3.确保img有alt属性，figcaption补充而非重复alt文本，避免放置装饰性图片；4.可为figure添加class或id以便CSS样式控制，提升可访问性和结构清晰度。
2025-11-12 22:07:36
776
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部