DIV CSS position绝对定位absolute relative教程篇
常常使用position用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。
一、position语法与结构
position语法：
position : static absolute relative
position参数：
static : 无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
position说明：
设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。
二、position实际用处
绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用position 绝对定位非常方便布局对象。
绝对定位position示范适用图、不规律布局，为即可利用position:absolute；position:relative进行绝对定位
绝对定位与float浮动不能同时使用，比如一个大盒子里有的是绝对定位，有的是使用css float浮动定位，这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位，这也算是IE6 CSS HACK吧，注意不要混用即可。
三、绝对定位使用条件
position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。
.divcss5{position:relative} 定义，通常最好再定义CSS宽度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px，距离父级上边距离为10px
或
.divcss5-a{position:absolute;right:10px;bottom:10px} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px
对应HTML结构
这样就绝对定位了“divcss5-a”在父级“divcss5”盒子内。
注意的是，left（左）和right（右）在一个对象只能选一种定义，bottom（下）和top（上）也是在一个对象只能选一种定义。
四、position应用案例
这里DIVCSS5为大家实例应用position绝对定位，我们设置一个最外层盒子css 边框为红色，css width为400px,css height为200px,内部包含了2个盒子，为就用绝对定位这2个盒子，第一个盒子CSS命名为“divcss5-a”,其宽度为100px,背景颜色为黑色，高度为100px,定位距离父级上为10px，距离左为10px;第二个盒子CSS类命名为“divcss5-b”，其宽度和高度分别为50px,css背景颜色为蓝色，距离父级下距离为13px,距离父级右边为15px。
1、css代码如下
2、html代码片段
3、DIV+CSS绝对定位案例截图
DIV+CSS position绝对定位布局应用案例
五、css绝对定位总结
通常我们使用position:absolute；position:relative进行绝对定位布局，通过CSS 进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom 的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以
为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS 代码臃肿，更加经验适当使用，用于该使用地方。在绝对定位时候我们可以使用css z-index定义css层重叠顺序。
同时left、right、bottom、top的数值，可以使用（Photoshop）PS切片工具获取准确的数值。
相关实例：div重叠
CSS 定位 CSS 定位(Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。 另一方面，CSS1 中首次提出了浮动，它以Netscape 在Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。 一切皆为框 div、h1 或p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和strong 等元素称为“行内元素”，这是因为它们的内容显示
在行中，即“行内框”。 您可以使用display 属性改变生成的框的类型。这意味着，通过将display 属性设置为block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把display 设置为none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。 但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待： some text Some more text. 在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。 块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
实训4-7 绝对定位的应用 一、案例描述 1、考核知识点 绝对定位 2、练习目标 进一步理解绝对定位的应用。 灵活运用绝对定位达到控制页面布局的效果。 3、需求分析 浏览网页时，经常需要将页面放大或缩小的情况。为了保证布局中的按钮等不发生错位就需要用到定位属性。本案例通过绝对定位实现按钮在父级元素中正常显示的效果。 4、案例分析 1)效果如图1所示。 图2 绝对定位的应用效果 2)具体实现步骤如下所示： a)定义一个容器，给容器设置绝对定位属性。 b)在父容器中定义一个关闭按钮和一个提交按钮，将其定位在右上角和右下角。 二、案例实现 【常规准备工作】 启动Hbuilder，在Hbuilder中新建web项目“实训4-7”，建议建在D盘根目录。 将实训4-7更名为“学号最后两位+姓名-实训4-7”，称为“实训文件夹” 1、制作页面结构
新建HTML页面“绝对定位.html”，参考代码如下： 下载本课题所需素材图片，并拷贝到图片目录中 参考代码如下： 1 2 3
4 5
10 
11 
12概要： 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看这个附件demo。) 说明： 占位空间：元素在文档流中所占据的空间。 物理空间：元素本身所占据的空间。 下面分3种情况分别对相对定位和绝对定位进行讨论： 1.只使用css第一组属性布局定位元素的情况 2.只使用css第二组属性布局定位元素的情况 3.混合使用第一组和第二组属性的情况 图1为未定位时的初始效果， 层级关系为：
1.仅使用left、right、top和bottom属性布局相对定位元素的情况 元素原本所占的占位空间仍保留，物理空间偏移。 图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。 层级关系为：
GPS相对定位原理 1. 相对定位原理概述 不论是测码伪距绝对定位还是测相伪距绝对定位，由于卫星星历误差、接收机钟与卫星钟同步差、大气折射误差等各种误差的影响，导致其定位精度较低。虽然这些误差已作了一定的处理，但是实践证明绝对定位的精度仍不能满足精密定位测量的需要。为了进一步消除或减弱各种误差的影响，提高定位精度，一般采用相对定位法。 相对定位，是用两台GPS接收机，分别安置在基线的两端，同步观测相同的卫星，通过两测站同步采集GPS数据，经过数据处理以确定基线两端点的相对位置或基线向量（图1-1）。这种方法可以推广到多台GPS接收机安置在若干条基线的端点，通过同步观测相同的GPS卫星，以确定多条基线向量。相对定位中，需要多个测站中至少一个测站的坐标值作为基准，利用观测出的基线向量，去求解出其它各站点的坐标值。 图1-1 GPS相对定位 在相对定位中，两个或多个观测站同步观测同组卫星的情况下，卫星的轨道误差、卫星钟差、接收机钟差以及大气层延迟误差，对观测量的影响具有一定的相关性。利用这些观测量的不同组合，按照测站、卫星、历元三种要素来求差，可以大大削弱有关误差的影响，从而提高相对定位精度。 根据定位过程中接收机所处的状态不同，相对定位可分为静态相对定位和动态相对定位（或称差分GPS定位）。
2. 静态相对定位原理 设置在基线两端点的接收机相对于周围的参照物固定不动，通过连续观测获得充分的多余观测数据，解算基线向量，称为静态相对定位。 静态相对定位，一般均采用测相伪距观测值作为基本观测量。测相伪距静态相对定位是当前GPS 定位中精度最高的一种方法。在测相伪距观测的数据处理中，为了可靠的确定载波相位的整周未知数，静态相对定位一般需要较长的观测时间（1.0h~3.0h ），称为经典静态相对定位。 可见，经典静态相对定位方法的测量效率较低，如何缩短观测时间，以提高作业效率便成为广大GPS 用户普遍关注的问题。理论与实践证明，在测相伪距观测中，首要问题是如何快速而精确的确定整周未知数。在整周未知数确定的情况下，随着观测时间的延长，相对定位的精度不会显著提高。因此提高定位效率的关键是快速而可靠的确定整周未知数。 为此，美国的Remondi B.W 提出了快速静态定位方法。其基本思路是先利用起始基线确定初始整周模糊度（初始化），再利用一台GPS 接收机在基准站0T 静止不动的对一组卫星进行连续的观测，而另一台接收机在基准站附近的多个站点i T 上流动，每到一个站点则停下来进行静态观测，以便确定流动站与基准站之间的相对位置，这种“走走停停”的方法称为准动态相对定位。其观测效率比经典静态相对定位方法要高，但是流动站的GPS 接收机必须保持对观测卫星的连续跟踪，一旦发生失锁，便需要重新进行初始化工作。这里将讨论静态相对定位的基本原理。 2.1 观测值的线性组合 假设安置在基线端点的GPS 接收机()1,2i T i =，相对于卫星j S 和k S ，于历元()1,2i t i =进行同步观测（如图2-1），则可获得以下独立的载波相位观测量： ()11j t φ，()12j t φ，()11k t φ，()12k t φ，()21j t φ，()22j t φ，()21k t φ，()22k t φ
第四章GPS定位原理 GPS绝对定位（单点定位、伪距定位） 静态绝对定位 动态绝对定位 GPS相对定位（差分定位？） 静态相对定位 动态相对定位 第一节 GPS绝对定位 GPS绝对定位：是一个用户利用GPS接收机，以地球质心为参考点，对卫星信号进行接收和观测，确定接收机天线在WGS-84坐标系中的绝对位置，又称单点定位或伪距定位。 GPS绝对定位基本原理： 以GPS卫星和用户接收机天线之间的距离观测量为基准，根据已知的卫星瞬时坐标，来确定用户接收天线所对应的位置。 现令 : (X j Y j Z j) 为卫星 j 的已知坐标, j = 1，2 …n。 2、绝对定位的精度评价: （1）平面位置精度因子HDOP （2）高程精度因子VDOP （3）空间位置精度因子PDOP （4）几何精度因子GDOP （5）接收机钟差精度因子TDOP 注: 1）DOP值∝ 1/V , V为星站六面体的体积。 2）亦要考虑大气传播误差的影响。 第二节 GPS相对定位 GPS相对定位：是利用两台或两台以上GPS接收机分别安置在不同的GPS点上，并同步观测相同的GPS卫星，将所获得观测值按一定的方法进行差分处理，消除一些误差对各观测值影响的相关部分，然后再进行解算，可以获得GPS点间的相对位置或基线向量。 GPS相对定位数学模型 载波相位测量的观测方程:
1、一次差分观测值: 1) .站际一次差分观测 ※其消除了与卫星有关的误差(星钟误差等)影响,削弱了大气传播误差(电离层和对流层折射误差)影响。 2).星际一次差分观测 ※其消除了与接收机有关的误差(机钟误差等)影响,削弱了大气传播误差(电离层和对流层折射误差) 的影响。
cssSelector定位 一.为什么使用cssSelector定位元素？ 目前针对一些常规定位方式有：By.id、https://www.doczj.com/doc/b66923427.html,、By.LinkTest(针对标签)、By.ClassName 针对不太好定位的，比如：没有id、name、class的定位方式，或者说id、name、class的value值显示重复，不太方便一下写出定位方式，这样可以考虑下其它定位方式。以下主要介绍cssSelector如何解决id、name、class的value值显示重复的定位方式。 二.基础语法
三.css常用的定位方式介绍 1.E代表的是标签； 2.E>F：F也是代表的标签，称为子代元素，F是E的子代元素，说通俗一点F是E的儿子 关系，F紧跟着E后面的第一个元素，直接的下一级； 3. E F：隔着多层标签，称为后代元素。通俗点说祖宗辈关系，例如爷爷和孙子关系； 4.E+F：匹配紧随E元素之后的同级元素F（只匹配第一个），称为毗邻元素选择器。通俗 点解释E是大哥，后面有多个弟弟，只取它最近一个弟弟F； 5. E ~ F：同级标签，称为同级元素选择器。通俗称为兄弟关系，例如哥哥和弟弟关系； 6.E[att='val']：E代表标签，att代表属性，val指属性的值； 7.E[att1='v1'][att2*='v2']:多属性选择器，针对一个标签有多个属性，做并且的关系同时满 足条件； https://www.doczj.com/doc/b66923427.html, class：点代表class； 9.#footer id：#号代表id； 10.ele:nth-of-type(n)是指其父元素下第n个ele元素。例如：同一级下有10个div标签，那 么只需要定位其中6个div，这时代码可以这样写：div:nth-of-type(6)，括号中的数据代表索引查找第n个元素； 四．cssSelector常用定位方式的案例 1.例如这样一段html代码的网页