【CSS---定位基础篇】

CSS-----基础定位:

模块目标

一 、 学习定位原因：（定位的作用）

（1）某元素可以在一个盒子内移动，并压在其他盒子之上

（2）有些元素固定在网页中某位置

通过标准流和浮动无法实现

二 、定位组成：

将盒子定在某一位置（也是摆放盒子，但是可以定在任意位置）

定位=定位模式（定位方式）+边偏移（决定元素最终位置）

2.1 四种定位模式：

css中position属性来设置

（1）静态定位（了解）：

是元素默认的定位方式，相当于无定位

按照标准流的特性摆放位置，没有边便宜（和标准流一样）

（2）相对定位relative：

特点：

1 相对于原来自己的位置移动：必须在css中声明定位模式和边偏移

2 移动的位置是相对于原来的位置(自恋型)；原来在标准流的位置继续占有，不脱标，继续保留原来的位置

3 给绝对定位当爹（限制绝对定位）

position:relative ；

top:npx;

left:mpx;

（3）绝对定位 absoluete：（重要）

绝对定位是相对于祖先元素（父元素）来移动

position:absolute;

特点：

1 如果（1）没有父元素/（2）父元素没有定位，就都以浏览器为基准进行移动

2 如果有多个祖先元素（有爹有爷）：以距离最近一级有定位的祖先元素为参考来移动（如果父亲没有定位而爷爷元素有定位，就以爷爷元素为基准进行移动）

3 绝对定位不占原来的位置（脱离标准流，会飘起来）

子绝父相（非常重要）

子级使用绝对定位，父级就需要用相对定位！！！

子绝：子级元素使用绝对定位，不会占有原来的位置，可以放在父盒子的任意位置，并且不会影响其他的盒子

父相：父亲要有定位（相对定位，要占有位置），子级才能以父级元素为基准进行移动

因此相对定位给场用左绝对定位的父级

但不绝对，如果父元素不需要占有位置，子绝父绝也有可能

（4）固定定位 fixed：重要

作用：固定到浏览器可视区的某个位置，即使滚动浏览器页面元素的位置也不会改变

语法：

position:fixed；

特点：

1 以浏览器的可视窗口为基准进行移动

2 固定定位不占有原来的位置（脱标，可以认为是一种特殊的绝对定位）

固定定位小技巧—紧贴版心

小算法：

（1）先使用绝对定位向右移动（left:50%;)到网页平分线上

（2）固定定位的盒子margin-left：再向右移动版心盒子宽度一半的距离

（5）粘性定位sticky:（了解，不是很常用）

poistion:sticky;

特点：

1 以浏览器可视窗口为参照点移动

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

3 边便宜必须添加上/下/左/右中的一个才有效

2.2边偏移：

就是盒子移动到最终位置，

有top（距离顶部）

bottom（下）

left（距离网页右边）

right四个属性

2.3 定位总结：

2.4 定位叠放次序：

z-index属性:z表示z轴，决定谁在上谁在下

语法：

1 数值可正可负可0，数值越大越靠上

2 如果属性值相同，按照代码顺序（解析顺序），后来者居于顶部

3 只有定位的盒子才有z-index属性