绝对定位、相对定位、固定定位特点

一、定位

1、定位的定义

• 某个元素可以自由地在盒子上面移动，并且可以压着其他元素
• 当滚动窗口时，某个元素可以固定在页面上

可以让盒子自由的在某个盒子上进行移动并且可以压住其他盒子，或者可以在屏幕上固定在页面上。

2、组成

定位=定位模式+边偏移

定位模式（position）

制定一个元素在文档中的定位方式

定位模式	描述
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移（方位名词）

据定了元素的最终位置

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

2.1 静态定位(static)

默认定位方式，无定位的意思。

语法：

选择器 { position:static; }

• 静态定位按照标准流特性摆放位置，他没有偏移
• 静态定位在布局上很少用到

2.2 相对定位(relative)

相对于他原来的位置进行移动

语法：

选择器 { position:relative; }

特点：（一定记住）

1. 相对于他原来的位置进行移动

2. 还保留原来的位置，后面的盒子仍然以标准流的方式对待它。（不脱标，保留原来的位置）

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtiyvXlU-1611232447682)(C:\Users\Administrator\Desktop\总结\images\相对定位.png)]

2.3 绝对定位(absolute)

元素在移动位置的时候，是相对于他祖先元素来说的（拼爹型）。比学习饿边偏移。

语法：

选择器 { position:absolute; }

特点：（一定记住）

1. 如果父级元素没有设置定位，则相对于浏览器为准进行移动
2. 完全不占原来的位置（完全脱标）
3. 如果父元素有定位（相对、绝对、固定），则以最近的一个带有定位的父级为准进行移动

2.3.1 子绝父相

因为父级元素需要占用位置，则进行相对定位；子元素不需要占用位置，需要压在父元素上，则进行绝对定位。

2.4 固定定位(fixed)

元素是固定在浏览器的可视区的位置。必须写边偏移。

特点：（一定记住）

1. 以浏览器的可视区域为参照点移动元素
2. 固定定位不在占有原先的位置（脱标）
3. 必须有宽度

2.5 粘性定位(sticky)

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

2. 占有原来的位置（相对定位的特点）

3. 必须添加边偏移

和网页滚动搭配，兼容性较差，IE不支持

3、定位总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	基本单独使用
absolute绝对定位	是（不占有位置）	带有定位的父级	要和定位父级元素搭配使用
fixed 固定定位	是（不占有位置）	浏览器可视区	单独使用，不需要父级
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少

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

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

• 注意：

  浮动、绝对定位、固定定位不会出现外边距塌陷问题。

4、定位的叠放顺序

语法：

选择器 { z-index：1； }

• 默认的为auto，可以是负值、0、或者正数，数值越大，盒子就越往上
• 如果属性值相同，则按照书写顺序
• 数字后面没有单位
• 只有定位的盒子才有此属性

5、定位的扩展

5.1 绝对定位的盒子居中

margin：0 auto；不能被绝对定位设置水平居中。

例子：

.box {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red;
}

.prev {
    postion: absolute;
    width: 100px;
    height: 100px;
    /*水平居中*/
	left:50%;
    /*负值，盒子宽度的一半*/
	margin-left: -50px；
	background-color: green;
}

.next {
    postion: absolute;
    width: 100px;
    height: 100px;垂直居中
    top: 50%;
    /*负值，盒子宽度的一半*/
    margin-top: -50px;
	background-color: yellow;
}

<div class="box">
	<div class="prev"></div>
    <div cleass="next"></div>
</div>

5.2 定位的特殊性

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

1. 行内元素添加固定定位或者绝对定位时，可以设置宽高
2. 块级元素添加绝对定位或者固定定位时，如果不给宽和高，默认大小是内容的大小

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

5.4 浮动不会压住标准流里面的文字

浮动只会压住下面的标准流的盒子，但不会压住文字内容。这相当于文字的环绕效果。现在用来布局。

5.6 脱标的盒子不会触发外边距塌陷

浮动、绝对定位、固定定位元素的都不会触发外边距合并的问题。

解决这个问题的方法之前在发过的文章有写过，用padding、border或者overflow

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

6、网页布局的总结

一个完整的网页，需要有浮动、定位和标准流进行布局。

1. 标准流

   可以让盒子进行上下或者左右排列，则需要标准流

2. 浮动

   可以让多个块级元素进行左右对齐或者进行一行排列，多个块级盒子进行水平显示，则使用浮动

3. 定位

   定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。当元素需要自由的移动且压在下面的盒子时，或者固定在浏览器页面上时，则需要定位