css中的定位详解

为什么需要定位

情况一：某个元素可以自由的在一 个盒子内移动位置,并且压住其他盒子.
情况二：当滚动窗口时,盒子是固定在屏幕某个位置的。
那么，以上两种情况用标准流或者浮动能实现吗？

因此：
1. 定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。
2. 而浮动只是可以让多个块级盒子一行没有缝隙排列显示 ,经常用于横向排列盒子。

定位的组成

定位: 相当于在摆放盒子，将盒子定在某一个位置或按照定位的方式移动盒子。定位=定位模式+边偏移

1. 定位模式

定位模式决定元素的定位方式, 它通过CSS的position属性来设置

属性值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.边偏移

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

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位方式

一、静态定位

静态定位是元素默认的定位方式,就是无定位

语法: 选择器{ position: static; }

• 静态定位按照标准流特性摆放位置 ,它没有边偏移
• 静态定位在布局时很少用到

二、相对定位

相对定位指元素在移动位置的时候,是相对于它原来的位置来说的。

语法 : 选择器{ position: relative; }

特点：

1. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
2. 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它 (不脱标,继续保留原来位置)
   

三、绝对定位

绝对定位指元素在移动位置的时候,是相对于它父元素来说的。

语法: 选择器{ position: absolute; }

特点:

1. 如果没有父元素或者父元素没有定位,则以浏览器为准定位( Document文档)。
2. 如果父级以上元素有定位(相对、绝对、固定定位) , 则以最近一级的有定位的父级以上元素为参考点移动位置。
   假设有A、B、C、三个盒子，C盒子的父级是B盒子，B盒子的父级是A盒子：
   
3. 绝对定位不再占有原先的位置。( 脱标)

子绝父相

1.绝对定位和相对定位到底有什么使用场景呢?

以上为常见的图片切换的布局,切换按钮及小圆圈不压住图片,显然是不占用位置的。第一想到用浮动，可以让一个按钮盒子左对齐,另一个按钮盒子右对齐。可是浮动只会影响后面的标准流，如果图片是先插入的，那么这两个盒子就会跑到图片下面显示。还有个问题就是，添加了浮动，三个盒子会在一行上显示，所以这时候就需要用到子绝父相。
所以得出以下结论：

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

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

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

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

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

四、固定定位

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

语法: 选择器{ position: fixed; }

特点:

1. 以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系，不随滚动条滚动。

2. 固定定位不在占有原先的位置。固定定位也是脱标的,可以看做是一种特殊的绝对定位。

小技巧: 让一个小盒子固定在版心右侧位置

1. 让固定定位的盒子left: 50%走到浏览器可视区(也可以看做版心)的一半位置。
2. 再让固定定位的盒子margin-left:版心宽度的一半距离。即多走版心宽度的一半位置
   

五、粘性定位

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

语法: 选择器{ position: sticky; }

特点:

1. 以浏览器的可视窗口为参照点移动元素(固定定位特点)
2. 粘性定位占有原先的位置(相对定位特点)
3. 必须添加top、left. right. bottom 其中一个才有效
4. 当某盒子添加了粘性定位且top：10px时，它表示：滚动页面，当盒子距离浏览器可视区顶部10px时，将不再跟随页面滚动。
5. 了解即可，因为兼容性较差，不常用。

相关笔记：
【笔记】CSS浮动的超详细介绍

【笔记】CSS的三大特性和css元素显示模式

【笔记】CSS基础知识之复合选择器的介绍