定位块总结 第1篇

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。

语法：

静态定位 按照标准流特性摆放位置，它没有边偏移。

静态定位在布局时我们几乎不用的

相对定位的特点：（务必记住）

1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

效果图：

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

语法：

完全脱标 —— 完全不占位置；

父元素没有定位，则以浏览器为准定位（Document 文档）。 3.父元素要有定位

绝对定位的特点总结：（务必记住）

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（Document 文档）。

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

这个 “子绝父相” 太重要了，是我们学习定位的 口诀，是定位中最常用的一种方式这句话的意思是：子级是绝对定位的话，父级要用相对定位。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结： 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？ 分析：

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

语法：

固定定位的特点：（务必记住）：

1.以浏览器的可视窗口为参照点移动元素。

2.固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。（认死理型）

完全脱标—— 完全不占位置；

只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；

固定定位举例：

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

语法：

粘性定位的特点：

1.以浏览器的可视窗口为参照点移动元素（固定定位特点）

2.粘性定位占有原先的位置（相对定位特点）

3.必须添加 top 、left、right、bottom 其中一个才有效

跟页面滚动搭配使用。 兼容性较差，IE 不支持。

一定记住 相对定位、固定定位、绝对定位 两个大的特点： 1. 是否占有位置（脱标否） 2. 以谁为基准点移动位置。

学习定位重点学会子绝父相。

注意：

定位块总结 第2篇

小算法：

1.让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心） 的一半位置。

2.让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。 案例效果：

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)。

语法：

z-index 的特性如下：

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

定位块总结 第3篇

注意：加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

但是可以通过以下计算方法实现水平和垂直居中，可以按照下图的方法：

盒子居中定位示意图

绝对定位和固定定位也和浮动类似。

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

浮动元素、**绝对定位(固定定位）**元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位） 会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。

定位块总结 第4篇

它主要完成如下工作：

1. 调用GpsCallback函数实现三个消息的同步

2. 然后发布同步完的消息跟tf

我们看下它是咋同步的

1. 由于要跟imu与gps_status同步，首先要确保这两个列表都有数据

2. 确认有数据后就可以用PrepareLocalizationMsg方法来同步了

3. 最后调用RunWatchDog函数来监测定位数据发送的实时性

那就来到PrepareLocalizationMsg函数，看下它的实现。

它的逻辑也很清晰，根据传进来的当前gps_msg消息，找到列表中最匹配的imu_msg，然后用ComposeLocalizationMsg方法将他们组合成LocalizationEstimate类型的消息（及最终定位模块输出的定位信息）。

同样gps_status也是先找到跟当前gps_msg时间戳最近的消息，然后给定位状态信息赋值。

按顺序我们先看下FindMatchingIMU这个函数，代码有点多但不复杂，可以直接看下图来理解，这是正常找到匹配的imu消息然后插值的情况。

为啥要插值呢，看上图gps_msg跟匹配到的imu_msg时间上肯定有一点点小偏差，所以实际我们想确定的imu状态应该在图上的imu_msg 3与imu_msg 4之间，所以就需要插值来获取更为精确的imu状态。

下面是代码，可以跟着我的注释来理解。

那么如何插值呢，接下来就是插值函数，这里用的是易于理解的反距离加权插值法，可以结合下图先来看下。

假设t=24这个时间是我们要插值的位置，根据时间间隔，靠得近的t=20比较近它的权重就应该大，反之则小，这样就可以推算出t=24要插的值。

根据原理出发来看代码应该就很好理解了。

这里frac1是前一个imu_msg跟当前gps_msg时间戳的距离，p就是对应时间戳的消息内容。

主要用来构建最终发出去的定位消息，他是借助mutable_XXX()跟set_XXX()这类函数来填充消息的，has_XXX()是判断消息里是否有数据。

LocalizationEstimate消息类型定义在xxxto目录下的文件里。

代码重复性很高，后面的代码我就用...省略了。

跟FindMatchingIMU很像，主要也是用迭代器遍历整个gps_status_list_，唯一区别就是它找的是整条list里时间差最小的消息，可能它接收的消息不是按时间先后顺序有序排列的。

跟ComposeLocalizationMsg函数功能一样，我就说下这个函数输入的两个参数吧。

drivers::gnss::InsStat消息类型定义在apollo根目录的modules/drivers/gnss/xxxto/文件里，而LocalizationStatus就定义在当前目录的xxxto/里。

至此消息同步的主要工作已经做完，接下来就是把消息发布出去了。

回到Proc()函数，PublishPoseBroadcastTopic跟PublishLocalizationStatus这两个发布函数很简单就是直接之前初始化的发布器调用Write()方法即可 。

然后就是tf发布函数，tf的赋值操作跟上面定位消息的赋值一样，因为它也是xxxtobuf生成的，我就提下它的路径吧，在apollo的modules/transform/xxxto/文件里。

说下整体看下来的感受吧，我认为Apollo的rtk定位模块还是挺适合入门者学习的。

定位块总结 第5篇

从消息传递的角度来看，rtk主要订阅下图左上角这三个由惯导驱动发过来的定位数据，同步imu与odometry这两个信息，最终发布同步完的定位信息。

这里的关键点就是如何实现这三个消息的同步，apollo这边是把imu跟ins_stat这两个信息先分别保存在两个列表中，然后在读到odometry信息后在保存的列表里找到最匹配的信息来同步，匹配过程主要用反距离加权插值法实现。

定位块总结 第6篇

2.浮动 float 只可以让多个块级盒子 一行 没有缝隙排列显示或者左右对齐盒子， 经常用于横向排列盒子。

3.定位 position 则是可以让盒子 自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子，有层叠的概念，就是可以让多个盒子前后叠压来显示。

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。

边偏移则决定了该元素的最终位置。