定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。
如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素 , 直到浏览器 ;
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
定位的基本思想很简单，它允许你定义元素出现在页面的任何位置. 是通过position属性配合left,right...等来实 现的.
此时就要求父容器必须稳定 , 如果父容器使用了 绝对布局 , 父容器就不会保留位置 ,
要实现如下功能 , 下图 粉色 部分是 整体 父容器 , 紫色元素 是 中心的核心位置 , 蓝色是左上角的浮标 , 红色是右下角的浮标 ;
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：
注意：除非我们需要将元素 由其他定位模式 强制改回 标准流，否则一般情况下不用。
使用position定位有四种方式，分别为absolute、relative、static、fixed，static是静态定位，也为系统自动定位。下面主要分析其他三种定位方式的特点。
包含块( containing block ) 正常情况下： 包含块就是离当前元素最近的祖先块元素，
CSS 布局的核心是 position 属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。position 属性有4个值：static、relative、absoulte、fixed，默认值为 static。
1 行高和字号 1.1 行高 CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上。 line-height: 40px; 文字，是在自己的行里面居
字体图标 指的是 将图标做成字体样式 , 在 放图标的地方 使用 文字 即可实现 图标显示 ;
含义：采用绝对定位的元素在移动位置的时候是以父元素为参照物的,但是这个父元素必须满足一定的条件才能成为绝对定位元素眼里的父元素。
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
注意：绝大多数情况下，相对定位，会与绝对定位配合使用。 **原因：**绝对定位的元素（即设置了 position: absolute; 的元素）相对于其最近的一个已定位的祖先元素进行定位。如果没有已定位的祖先元素，它将相对于浏览器窗口（即 body 元素）进行定位。 通过将父元素设置为相对定位（position: relative;），而将子元素设置为绝对定位（position: absolute;），可以使子元素的定位基于父元素，而不是整个页面。这使得布局更具可控性和可预测性。
上述 父容器 的定位 不一定是 绝对定位 , 其它类型的定位也可以 , 在本博客的示例中 , 使用的就是 相对定位 ;
设置图片自适应 : 设置的图片可能 大于或小于 图片容器 , 设置其宽度填充 100% 父容器 , 可以保证图片填充满父容器 ;
通过本节你将了解 iVX 开发中的核心—— iVX 组件的使用方法。iVX 的组件是开发应用时所必要的对象，通过这些对象你将快速的完成应用的开发。
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。—（w3cSchool）
绝对定位 不能通过 设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ;
CSS定位在布局的时候绝对是一大主力，从css1的浮动到css2定位支持远胜对其他的支持到现在css3定位的稳定，css的定位的地位不言而喻。
元素框偏离自身流相应的位置（靠left和top定位），元素仍然保持为定位前的形状，它原本所占的空间仍保留。从这一角度看，好像该元素仍然在文档流/标准流中一样。
position【定位属性：static，relative，absolute，fixed，inherit，-ms-page，initial，unset】
position: relative 相对默认的布局位置进行定位，也就是相对自己应该在的位置来定位。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/101253.html原文链接：https://javaforall.cn
Extended VINS-Mono: 一个在大规模户外环境中进行绝对和相对车辆定位的系统性方法
静态定位是默认值，就是之前认识的标准流。 代码：postion:static 静态定位不能通过方向偏移值来改变。
[2].浮动布局方式：通过设置html的float属性显示,值：none不浮动、left对象向左浮动，而后面的内容流向对象的右侧、right对象向右浮动，而后面的对象流向对象的左侧(取消独占一行的行为，允许别人与其一行，其实是这个块从文档流中分离出来，他之后的对象视它不存在)
position属性是CSS中非常重要的布局属性，可以用来实现多种复杂的效果，如悬浮导航、弹性盒子、响应式布局等。理解并掌握不同类型的定位相对关系是熟练使用position属性的关键。
特性： 1. 移动的出发点是自身标准流的位置 2. 相对定位移动的元素不会对别的元素产生干扰，“没有脱标”，真正占得位置还是标准流的位置（肉体不在 灵魂永驻） 3. 可以盖在标准流的上方 4. 一般用于微调元素和配合绝对定位来实现效果
给父级div设置相对定位，子元素div设置绝对定位，left、right、top、bottom都设置为0，然后将margin设置为auto即可实现。
在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，本节我们就讲解css定位相关的属性，定位可以分为三类:
定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置.
position属性有4个值，分别是：static、absolute、fixed、relative。 --static是默认值，代表无定位（一般用于取消特殊定位的继承，恢复默认）。 --absolute时，这个容器即被绝对定位了。绝对定位在几种定位方法中使用最广泛。 --fixed时，这个容器即被固定定位了。固定定位和绝对定位非常类似，不过被定位的容器不会随着滚动条的拖动而变化位置。 --relative时，这个容器即被相对定位了。相对定位和其它定位相似，也是独立出来浮在上面。
定位为什么需要定位> 定位可以让盒子在指定盒子内自由移动位置，并压住其他盒子，而浮动只能让盒子排在一行；定位的组成>定位是定位模式+边偏移> 定位模式用于指定一个元素在文档中的定位方式，使用CSS属性 position；值包括static、relative，absolute,fixed> 边偏移决定了改元素的最终位置；CSS中有top left right bottom四个属性；配合定位属性position使用- 静态定位static> 是元素的默认定位方式，按照标准流特性摆放位置，没有偏移- 相对定位re
在网页设计和开发中，布局是至关重要的一部分。为了创造吸引人的网页，开发人员需要深入了解各种布局技巧。CSS（层叠样式表）是控制网页布局的主要工具之一，而其中的定位属性为开发人员提供了强大的控制能力。在本文中，我们将深入研究CSS定位，以及如何利用它来创建现代、响应式的网页布局。
原文链接：https://note.noxussj.top/?source=cloudtencent 正常布局 文档流布局方式，按照顺序一个个排列好，效果如下图： <html> <head>
相对定位 relation 移动方向 top、right、bottom、left 特点 只加相对定位，不设置元素移动的位置，元素和之前是没有变化 根据自己原来位置计算移动的位置 不脱离文档流，元素移动走以后，原来的位置还会被保留 加上相对定位后对原来的元素本身的特征没有影响 提升层级 绝对定位 absolute 移动方向 top、right、bottom、left 特点 完全脱离文档流 行内元素支持所有样式 (与加上浮动或者inline-bolck以后的效果是一样的) 如果父级有定位，那位置会根据父
bottom属性描述时，以首屏页面左下角为参考点 如果浏览器不动，滚动条动的时候，红色盒子跟随页面动，红绿盒子间距不变。
一个元素box的定位和尺寸，有时候会跟某一矩形框有关，这个矩形框，就被称作元素的包含块。而元素会为它的子孙元素创建包含块，那么，是不是说，元素的包含块就是它的父元素呢？答案是否定的，这是一个误区。 一
布局模型 在网页中，元素有三种布局模型： 1、流动模型（Flow） 默认的 2、浮动模型 (Float) 3、层模型（Layer） 1、流动模型（Flow） 流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征： 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。 （每一个便签都显示着自己本来默认的那
有时候我们在写页面中，会发现绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，似乎父级的相对定位并没有起了作用。 首先要明白如下几个原理： 1、笔记本电脑的分辨率一般为1
CSS属性书写顺序 布局定位属性：display / position / float / clear / visibility / overflow 自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break 其他属性：content / cursor /border-r
注意：偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 （向下走）
惯性测量单元(Inertial measurement unit，简称 IMU)，是测量物体三轴姿态角及加速度的装置。一般IMU包括三轴陀螺仪及三轴加速度计，部分IMU还包括三轴磁力计。IMU在小至手机、VR，大至航空、航天领域都得到了广泛的应用。手机中的微信运动记录步数使用了IMU；VR中随着头部姿态变换切换视野场景用到了IMU；在GPS之前，航运轮船跨海航行确认航向依赖IMU；Apollo登月中依赖IMU实现位置追踪和朝向确认等等。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
