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

div+Css绝对定位(absolute)和相对定位(relative)的总结_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:27:08
原创
1265人浏览过

1.没有外div的情况下 设置绝对定位(absolute)和相对定位(relative)是没有区别的

2.相对定位占位置 而绝对定位不占位置 会漂浮在别的Div之上

3.若父Div没有设置定位,子Div要设置位置, 则子Div设置绝对和相对定位,都无所谓

4若父Div设置了定位,子Div设置成绝对定位 则是相对于浏览器,若子Div设置成相对定位, 则是相对于父Div的位置.

标书对比王
标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

标书对比王 58
查看详情 标书对比王

5如果统计元素中都是relative,那么设置第二个div 的css(left)时,是相对与第一个的距离

立即学习“前端免费学习笔记（深入）”；

大家都在看：

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

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

下载
来源：php中文网
收藏 点赞
上一篇：DIV+CSS 浏览器兼容性问题 下一篇：DIV+CSS网页布局对SEO的四大影响_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
在AMP页面中实现CSS背景渐变动画 本文详细阐述了在AMP（AcceleratedMobilePages）页面中实现CSS背景渐变动画的方法。针对传统HTML中直接对body标签应用动画在AMP中失效的问题，我们提出并演示了通过引入一个全屏包裹div元素，并将动画样式应用于该div的解决方案。本教程提供了完整的代码示例和注意事项，帮助开发者在AMP环境中成功创建动态背景效果。
2025-11-17 09:57:17
680
Mac用iTerm2分窗口同时编辑多个HTML文件 使用iTerm2分屏结合vim或nano在Mac上高效编辑多个HTML文件。首先打开iTerm2，用Command+D垂直分屏或Command+Shift+D水平分屏；在各窗格分别运行vimindex.html、vimabout.html或nanoheader.html、nanofooter.html打开文件；编辑时vim按Esc后输入:w保存、:q退出，nano通过Ctrl+O保存、Ctrl+X退出；保存后刷新浏览器预览效果，确保页面正确渲染。
2025-11-17 09:53:36
966
JavaScript中为循环输出项添加序号的实用教程 本教程旨在指导开发者如何在JavaScript的for循环中，为动态生成的列表项添加顺序编号。文章将详细解析如何利用循环索引（i）并结合简单的数学运算（i+1）来实现1-based的编号，从而提升数据展示的清晰度和用户体验。通过具体的HTML表单和JavaScript处理示例，您将掌握为数组或类似集合的输出结果进行有效编号的方法。
2025-11-17 09:25:02
798
CSS悬停效果控制：利用JavaScript实现父元素及兄弟元素的联动交互 本文探讨了在CSS中实现复杂悬停效果的挑战，特别是当需要通过子元素的悬停来影响其父元素或非相邻兄弟元素时。由于纯CSS缺乏直接的父选择器或前一个兄弟选择器，文章提出了一种结合JavaScript事件监听和CSS类切换的解决方案，详细介绍了如何通过鼠标事件动态修改父元素的类，进而利用CSS实现精细化的样式控制，包括示例代码和注意事项。
2025-11-17 09:15:06
345
如何添加HTML标签到网页_如何正确添加HTML标签到网页中 正确添加HTML标签需遵循结构规范：首先理解标签由开始、内容和结束三部分组成，如内容
2025-11-17 09:11:25
154
构建安全的用户登录与受限内容访问机制 本文旨在深入探讨如何为在线学习平台等应用构建一套安全的用户认证系统，并实现对高级内容的有效限制。我们将详细介绍基于会话和Cookie的用户登录流程，强调HTTPS的重要性，并探讨数字版权管理（DRM）技术在保护视频等付费内容方面的应用，确保只有订阅会员才能访问专属资源，同时允许提供部分免费预览。
2025-11-17 09:06:22
564
使用 SVGR 在 React 中自定义复选框选中状态 本文介绍了在使用SVGR将SVG图标转换为React组件后，如何自定义复选框选中状态下的显示效果。核心在于将SVG文件放置于public目录下，并通过URL直接引用，从而避免SVGR将其作为组件处理，进而实现background-image样式的正确应用。
2025-11-17 08:37:07
243
深入理解JavaScript文本动画：如何正确处理多个动态文本元素 本文旨在解决JavaScript文本动画中，当尝试对多个元素应用字符逐显效果时，动画仅作用于首个元素的常见问题。通过详细解析document.querySelector与document.querySelectorAll的区别，并结合forEach循环，我们将展示如何构建一个健壮的解决方案，确保每个目标文本元素都能独立、正确地执行字符动画，并提供完整的HTML、CSS及优化后的JavaScript代码示例。
2025-11-17 08:09:19
987
网页滚动条样式怎么结合js动态修改_html滚动条JS动态控制方法 通过CSS自定义滚动条样式并结合JavaScript动态控制滚动行为，可实现美观且交互丰富的页面效果。首先使用::-webkit-scrollbar等伪元素定义滚动条外观，仅适用于WebKit浏览器；再利用JS获取scrollTop值、设置smooth平滑滚动及监听scroll事件，实现如返回顶部、导航变化等功能；通过添加类名动态切换滚动条颜色或隐藏滚动条，提升视觉体验。注意兼容非WebKit浏览器时需借助JS模拟或第三方库，并优化scroll事件性能，避免频繁重绘。移动端需测试适配，确保流畅交
2025-11-17 07:07:07
225
Mac RemNote用CSS高亮HTML结构层次笔记 通过启用RemNote的CustomCSS功能，可为嵌套笔记添加层级高亮样式：进入设置→Appearance→开启EnableCustomCSS→编辑并粘贴CSS代码，利用不同背景色与边框颜色区分HTML结构层级（如蓝色表顶层、黄色表主干、红色表容器、灰色表深层嵌套），结合标签命名与emoji图标提升可读性，实现可视化HTML结构笔记。
2025-11-16 23:57:05
134
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部