下面的定义是我在51cto中摘抄的。
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
这里只是实验了absolute定位。等把每一种定位和浮动都搞清楚之后，才能谈怎么去同时使用他们。
下面是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
*{margin: 0px;padding:0px;}
#all{height:700px;width:500px;margin-left:20px;background-color:#eee;}
#fixed1,#fixed2,#fixed3,#fixed4,#fixed5{width:120px;height:50px;border:5px double #000;position:absolute;}
#fixed1{background-color:#9c9;}
#fixed2{top:20px;left:50px;background-color:#9cc;}
#fixed3{bottom:10px;left:50px;background-color:#9cc;}
#fixed4{top:10px;right:50px;z-index:10;background-color:#9cc;}
#fixed5{top:20px;right:90px;z-index:9;background-color:#9c9;}
#a,#b,#c{width:300px;height:100px;border:1px solid #000;background-color:#ccc;}
</style>
</head>
<body>
<div id="up" style="width:100%;height:100px;border:3px solid #009; background-color:#CC3">
</div>
<div style="position:absolute;width:100%;height:100px;border:3px solid #009; background-color:#F39">
红色的div
</div>
<div id="all">
<div id="a" style="z-index:1000;">第1个无定位的div容器，被红色绝对定位的div遮盖了</div>
<div id="fixed1">第1个固定的div容器</div>
<div id="fixed2">第2个固定的div容器</div>
<div id="fixed3">第3个固定的div容器</div>
<div id="fixed4">第4个固定的div容器</div>
<div id="fixed5">第5个固定的div容器</div>
<div id="b">第2个无定位的div容器</div>
<div id="c">第3个无定位的div容器</div>
</div>
<input type="button" value="点击隐藏最上面的div"/>
<script type="text/javascript">
$(function(){
$("input").click(function(){
$("#up").hide();
});
});
</script>
</body>
</html>
红色的div定位属性是绝对定位的，那么它就在原本的文档流里面脱离出来了，不在占用原来的位置，它后面的兄弟块就会占用它原来的空间。表现形式就是后面的内容提上来了。如图所示：红色的div把第1个无定位的div容器遮盖掉了。
可以给块级设置偏移位置，上图中的5个小一点的div可以在页面中的任意位置。他们都不处在原来的文档流中了。
现在来实验这个绝对定位的偏移位置是相对于那个块来定义的。
更改id为all的div的样式,如：<div id="all" style="position:absolute;">。
如图，all块级元素和红色的块级元素重叠了，他们的上下位置是根据z-index来确定的。
下面来看看那5个小一点的绝对定位的div的位置，和第一幅图比较他们都处在了all块级元素的内部了。
哈哈，到这里就可以来总结一下absolut的一些特点了。
他脱离了原来的文档流，不占用原来文档流的空间。脱离出来后他们后面的基本会计元素就会上体来填补原来的位置。
如果不设置left、top、bottom等属性，他们的位置因该处于他们前面的普通块级元素的下面，就如第二副图给出的位置，他们在黄色的div的下面。
如果设置了left等属性，那么他们的位置就分两种情况：
第一种）寻找他们的父元素（父元素设置了position属性），他们的位置就相对于这个父div来确定的。
第二种）如果没有找到一个父元素设置了position属性，那么他们就关于body元素来确定他们的位置。
- 大小: 37.1 KB
- 大小: 41.4 KB
分享到：
相关推荐
基于C/C++开发的单目控制机械臂的上位机程序+视觉识别和关节角反解+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C/C++开发的单目控制机械臂的上位机程序+视觉识别和关节角反解+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C/C++开发的单目控制机械臂的上位机程序+视觉识别和关节角反解+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C/C++开发的单目控制机械臂的上位机程序+视觉识别和关节角反解+源码，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
学生管理系统是一个典型的基于 Spring Boot 的应用程序，旨在帮助学校、教育机构或培训机构管理学生信息、课程安排、成绩等。下面我将介绍一个简单的学生管理系统的设计和实现，基于 Spring Boot 框架。 功能特点 学生信息管理 添加、编辑、删除学生信息。 查询学生信息，支持按姓名、学号等条件查询。
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
1.安装python3.4以上版本，并配置环境变量（目前有装3.9遇到坑的，我个人用的3.7.6） 教程：https://www.runoob.com/python3/python3-install.html 2.安装依赖包 方法：在cmd中（win+R 输入cmd 回车）输入 pip install pyperclip 回车 pip install xlrd 回车 pip install pyautogui==0.9.50 回车 pip install opencv-python -i https://pypi.tuna.tsinghua.edu.cn/simple 回车 pip install pillow 回车 这几步如果哪步没成功，请自行百度 如 pip install opencv-python失败 3.把每一步要操作的图标、区域截图保存至本文件夹 png格式（注意如果同屏有多个相同图标，回默认找到最左上的一个，因此怎么截图，截多大的区域，是个学问，如输入框只截中间空白部分肯定是不行的，宗旨就是“唯一”） 4.在cmd.xls 的sheet1 中，配置每一步的指令，如指
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
毕业设计之鲜花销售网站的设计与实现源码.zip毕业设计之鲜花销售网站的设计与实现源码.zip毕业设计之鲜花销售网站的设计与实现源码.zip毕业设计之鲜花销售网站的设计与实现源码.zip
药店销售管理系统ssm(药品销售)【说明】资源来源网络以及部分开源社区、仅供参考与学习、项目不可商用、一切后果由使用者承担、若是侵权请联系删除
JDK1.8 API 中文文档 高清完整版 CHM
母亲节快乐python脚本
华中科技大学电信专业 课程资料 作业 代码 实验报告-通信电子线路-内含源码和说明书.zip
1999-2022年各省城镇居民人均消费支出数据（无缺失） 1、时间：1999-2022年 2、来源：国家统计J、统计NJ 3、指标：城镇居民人均消费支出 4、范围：31省 5、缺失情况：无缺失
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
基于单片机的系统
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
分布式系统课程实验-内含源码和说明书.zip
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
【资源说明】 基于Scala+Flink实现实时冰蝎(Behinder)流量检测源码+部署文档+全部资料齐全 高分项目.zip基于Scala+Flink实现实时冰蝎(Behinder)流量检测源码+部署文档+全部资料齐全 高分项目.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。