定位(position)的总结

定位(position)

(定位，同浮动一样是前端开发人员进行css布局的另一神器。浮动布局比较灵活，但不容易控制，定位布局则相反，可以让用户精确地控制元素在页面中的位置“指哪打哪”，但缺乏浮动布局的灵活性)

1.边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。

2.定位模式

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

在css中，定位布局共有四种方式：

• （1）固定定位（fixed）；

• （2）相对定位（relative）；

• （3）绝对定位（absolute）；

• （4）静态定位（static）。

1). 固定定位

固定定位是绝对定位的一种特殊形式：

（认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形

1. 完全脱标 —— 完全不占位置；
2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
   跟父元素没有任何关系；单独使用的
   不随滚动条滚动。

当元素的position属性设置为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置（在视野中），相对屏幕的可视区进行定位。

固定定位，使用top、bottom、left和right这4个属性来设置元素相对浏览器窗口的位置，造成元素完全脱离文档流，改变元素类型，多用于“回顶部”特效和固定栏目的设置。

2). 相对定位

{相对定位是元素相对于它 原来在标准流中的位置 来说的}

相对定位的特点：

• 相对于 自己原来在标准流中位置来移动的
• 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

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

当元素的position属性设置为relative时，此时元素便具有相对定位的特性。相对定位的元素，其位置是相对于它的原始位置计算而来的，同样具有top、bottom、left和right这4个属性。相对定位不使元素脱离文档流，不改变元素的本身类型。

3). 绝对定位

绝对定位的特点：

• 绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准
• 移动位置
• 不保留原来的位置，完全是脱标的。
• 因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）:

• 完全脱标 —— 完全不占位置；
• 父元素没有定位，则以浏览器为准定位（Document 文档）。

4). 静态定位

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

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

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

如果没有指定元素的position属性值，元素也就是静态定位。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。 这个属性一般很少使用，不支持left、top等属性值，使用场景一般在清除其他定位属性上。

2. 绝对定位和相对定位的区别

一、主体不同

1、相对定位：是设置为相对定位的元素框会偏移某个距离。

2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。

二、特点不同

1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

三、 表现方式不同

1、相对定位：对一个元素进行相对定位，它将出现在它所在的位置上。可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

2、绝对定位：文本流中的内容会顶替绝对定位元素的位置，而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是被绝对定位后的坐标原点。

3.定位(position)的扩展

3.1堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序

z-index 的特性如下：

1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2. 如果属性值相同，则按照书写顺序，后来居上；
3. 数字后面不能加单位。

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

3.2定位改变display属性

( display :显示模式 )

可以改变显示模式有以下方式:

• 可以用inline-block 转换为行内块
• 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
• 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

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

**<注>：**浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding
border overflow解决的）
也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。、

4.定位小结

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常
模式	正常模式	不能	几乎不用
相对定位relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位fixed	完全脱标，不占有位置	相对于浏览器移动位置	能	单独使用，不需要父级

<注>：

1. 边偏移需要和定位模式联合使用，单独使用无效；
2. top 和 bottom 不要同时使用；
3. left 和 right 不要同时使用。