css定位布局

定位布局

在z轴上定位
定位=定位模式+边偏移
定位模式postion:
static 静态（默认情况下，为非定位元素，为标准流）
relative 相对 （定位元素）
absolution 绝对（定位元素）
fixed 固定（定位元素）
sticky 粘滞（定位元素）
边偏移（定位元素相对于父元素边线的距离）：
top right bottom left
若定位既设置left也设置了right偏移，默认使用left偏移

定位元素的特点：
可以使用定位规则：top right bottom left

• 1）相对定位relative：

不脱离默认文档流（占据原来空间，后面的元素不会受影响）
相对于他原来所在位置移动

	{position:relative;}

• 2）绝对定位absolute：

脱离默认文档流，不会占有原位置
相对于距离他最近的父定位元素移动（若所有的父元素都没有添加定位，则相对于浏览器视口移动）
应用时一般需要嵌套在相对定位元素中（子绝父相）

	{position:absolute;}

绝对定位中的居中，margin：0 auto；不能使用

	｛position:absolute;
	   left:50%;
	   margin-left: - 盒子宽度的一半;}

• 3）固定定位fiexd：

脱离文档流,不会占有原来的空间
相对于浏览器视口进行移动
固定在浏览器视口的某个位置（不随滚动条滚动）

	{position:fixed;}

	{position:fixed;
	left:50%;
	margin-left:版心宽度的一半;   //将盒子固定在版心的右侧
	}

• 4）粘滞定位sticky:

（相对定位和绝对定位的结合）
1）在没有达到阈值前不脱离默认文档流(相对定位），达到阈值脱离文档流（固定定位）
2）通过top，right, bottom,left 设置阈值

	｛position:sticky;
	   top:10px;}    //当盒子距离上方10px时固定在屏幕上，不随滚动条滚动

不同布局方式元素的层级关系： 标准流 <浮动<定位
定位之间的层级默认相同，但是在HTML结构中书写靠下层级更高，显示在上面

定位叠放次序
z-index 用来控制定位盒子在z轴上排列的前后次序
数值可为正整数，0 和负整数，数值越大，盒子越靠上
若数值相同，按照定位书写顺序，后来者居上

	｛position:absolute;
	   z-index：10；｝

定位布局的应用：
二级栏目
模态框：层罩
特殊布局
实现块元素居中：left:50% margin-left= -块元素的一半

注意
行内元素添加绝对定位和固定定位时，可以直接设置宽度和高度
块元素添加绝对定位和固定定位时，若没有设置宽高则默认大小为内容的大小