css基础-定位

定位

定位就是将盒子定在某一个位置，自由漂浮在其他盒子上（包括标准以及浮动）

定位 = 定位模式 + 边偏移

1. 边偏移

边偏移的值可以控制盒子的移动位置，并通过方位名词top、bottom、left 和 right 定义元素的边偏移

属性	描述
top	顶端偏移量，定义元素距离父元素的上边线的值
bottom	底部偏移量，定义元素距离父元素的下边线的值
left	左侧偏移量，定义元素距离父元素的左边线的值
right	右侧偏移量，定义元素距离父元素的右边线的值

top: 10px

2.定位模式

选择器 {position: 属性值; }

属性值	描述
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.1 静态定位

• 静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。
• 静态定位 按照标准流特性摆放位置，它没有边偏移。
• 静态定位在布局时我们几乎不用的

2.2 相对定位

相对定位是相对于它自身，原来在标准流中的位置

注意

使用相对定位后，原来标准流的位置继续占有，后续的盒子仍然以标准流看待该盒子

2.3 绝对定位

绝对定位是以带有定位的父级元素来移动

注意

1. 完全脱标，不占有原来位置

2. 父元素没有定位则以浏览器为参照定位
   

3. 父元素有定位

   将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
   

定位口诀 —— 子绝父相

• 子级是绝对定位，父级要用相对定位。

1. 方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
2. 父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
   • 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。

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

2.4 固定定位

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

1. 完全脱标，不占位置
2. 参照于浏览器的可视窗口——浏览器可视窗口+边偏移，不随父级元素以及滚动条的影响
   

3. 绝对定位居中

绝对定位不能通过margin: auto居中对齐，而需要使用以下方法

1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
2. margin-left: -100px;：让盒子向左移动自身宽度的一半。
   

4. 堆叠顺序

z-index 层叠等级属性可以调整盒子的堆叠顺序

z-index 的特性如下：

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

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

黑马前端全栈教程