web前端基础——定位

1、 定位的基本介绍及使用

1.1基本介绍

1.1.1标准流

1. 块级元素独占一行——垂直布局
2. 行内元素、行内块元素一行显示多个——水平布局

1.1.2 浮动

1. 可以让原本垂直布局的 块级元素变成水平布局

1.1.3 定位

1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于盒子之间的层叠情况

1.2 定位常见的应用场景

1. 可以解决盒子与盒子之间的层叠问题
   定位之后的元素层级更高，可以层叠在其他盒子上面

2. 可以让盒子始终固定在屏幕中的某个位置
   

1.3 定位的基本使用

1.设置定位方式
postition: static(relative/absolute/fixed)

常见的属性值

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2.设置偏移值
偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

2 、 静态定位

静态定位没有特殊效果，在这里不多赘述

3、相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动
代码：positon:relative

特点：

1. 需要配合方位属性来实现移动
2. 相对于自己原来的位置进行移动
3. 在页面中占原有的位置（仍然具有原有标签的显示模式特点）——没有脱标

在代码中如果left right属性都有则以left为准，若top bottom都有则以top为准

应用场景：
1.配合绝对定位组合使用（子绝父相）
2.用于小范围的移动

4、 绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位，若父级没有定位，则以浏览器窗口为参照进行定位

代码：positon:absolute

特点：

1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置—脱标显示
4. 改变标签的显示模式特点，具备了行内块的显示特点（在一行内共存，宽高生效）

绝对定位的盒子显示模式具备行内块的特点：加宽度高度生效，如果没有宽度高度并且没有内容，盒子的宽度尺寸就是 0

应用场景
配合绝对定位组成CP使用（子绝父相）

5、 子绝父相

子代使用绝对定位，父级使用相对定位

5.1 子绝父相 水平居中案例

使用子绝父相，让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）

在盒子使用绝对定位之后，就无法使用margin:0 auto这种方法实现水平居中

方法一：
使用绝对定位，进行位置调整

.box{
	width:300px;
	height:300px;
	positon:absolute;
	left:50%;
	margin-left:-150px;
	top:50%;
	margin-top:-150px;
}

方法二：
使用CSS3的位移属性：transform：translate()

.box{
	position:absolute;
	left:50%;
	top:50%;

	/* 位移：自己宽度、高度的一半 */
	transform:translate(-50%, -50%);

	width: 300px;
	height:300px;
}

6、 固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动

代码：positon:fixed

特点：

1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置——脱标
4. 具备行内块的显示特点

应用场景：
让盒子固定在屏幕中的某个位置

7、 元素的层级关系

不同布局方式元素的层级关系：

• 标准流 < 浮动 < 定位

不同定位之间的层级关系：

• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级会更高，会覆盖上面的元素

z-index: 整数n，n默认为0，n取值越大，显示顺序越靠上