第八课-定位
第八课-定位
一、定位是什么
你 在 电脑（参照物）前
位置+参照物
（一）默认元素普通流布局
普通流规则：
浏览器在默认情况下规定一个块元素在父元素内的排列规则：
1.从上往下排列
2.从左开始排列
3.一个块元素占一行
（二）固定定位position: fixed
位置+参照物
参照物：浏览器的窗口
fixed: 脱离文档流,不为元素预留空间,指定元素相对于屏幕窗口(viewport)来确定元素的位置，元素的位置在屏幕滚动时不会改变。
特点：
- 在不设置位置属性时默认在本身未脱离文档流的位置，但是不占位。
- 当设置方位属性时，参照浏览器可视窗口（左上角）定位。
（三）参照物与坐标
定位属性的出现必然伴随着某一个页面的元素或者浏览器窗口作为参照物。
参照物： 你在哪我就在哪，我就远远的望着你，不离不弃
坐标方向： left： 左到右为正/top: 上到下为正
right：右到左为正/bottom:下到上为正
（四）相对定位： relative
位置+参照物（自身）
position：relative 相对定位
relative:
相对与自身位置发生偏移，元素仍保留未定位前的形状,原本所占据的空间保留（灵魂“能看见”飘起来了，肉体还在“看不见”）
可以通过top/left/right/bottom调整位置,这是样式名,值是数值,带单位(px/em或者百分比)
（五）绝对定位： absolute
position：absolute 绝对定位也能当做定位样式
位置+参照物
参照物：根据祖先元素是否有定位样式来进行定位，如果你的祖先没有定位样式，会根据浏览器的窗口定位样式。
absolute:
相对于已经定位的元素的最近的祖先元素定位，如果你的祖先没有定位样式，可以通过top/left/right/bottom调整位置,这是样式名,值是数值,带单位(px/em或者百分比规定位置)
（六）定位position: static
position:static 元素的默认定位
没有任何效果
要使某个元素上的特定类型的定位，我们使用position属性。 可以的取值如下:
static: 指定该元素正常的布局行为,元素在文档流当前的位置布局,不支持top/right/left/bottom和z-index,这个值是默认值
二、定位的特性
（一）相对定位： relative特点
特点: 参照物是自身(参照物:以谁为中心移动)
1.不会让元素脱离文档流，会让元素飘起来（肉体还在）;
2.元素占据初始位置，不会影响页面布局；
3.支持margin padding auto，可以随意的移动元素；
4.不影响元素的本身特性(display: )，不会影响元素的类型;
5.如果没有设置偏移量,对元素本身没有任何影响；
（二）绝对定位： absolute特点
特点:
- 完全脱离文档流(参考浮动,且文字感受不到定位)，不占据初始位置;
- 会影响元素类型，块级化(完全变成block元素,不管怎么设置);
- 由里面的元素撑开宽高(不是宽度100%,包裹性)
- 没有(有定位属性的)祖先元素相对于浏览器窗口可视区域
- 配合参照物(相对定位的元素)(父相子绝)
- 参照有定位属性的最近的祖先元素定位
- margin: auto;暂时失效
- html结构 后写居上（不是css样式），位置一样的后面的覆盖前面的
- 父相子绝：父级设置相对定位，子级设置绝对定位
（三）固定定位 position:fixed
特性 （如窗口小广告“右下角”）
1,以窗口定位,不会跟随浏览器的窗口滚动
2,脱离文档流,不保留初始位置
（四） 区别
网页
标准文档流,
浮动是半脱离文档
文字能感受浮动的位置,
相对定位
不会脱离文档流,会让元素飘起来,
绝对,固定定位
完全脱离文档流
三、元素层级关系
z-index:
z-index: 可以调换两个元素的上下位置关系;
默认为auto,值可正可负,越大越在上面,只能用于同级元素对比!
只对realative/absolute/fixed有效,其余元素无效
层级
可以 正 负
默认值 auto 不是 零
层级的比较
是亲兄弟元素比较，不是儿子与儿子（子与子）的比较
四、两种居中方式
元素水平垂直居中
1.父级设置定位样式
子设置
position: absolute;
left:0;
right:0;
top: 0;
bottom: 0;
margin: auto;
2.父级设置 定位样式
position: relative;
子设置
position: absolute;
left:50%;
top:50%;
margin-left: -自身元素宽的一半;（设置百分比不生效）
margin-top: -自身元素高的一半;
五、粘性定位:position: sticky;
position: sticky;只能在html或css中使用， 到js 就可以淘汰 js能实现这种效果
粘性定位
位置 = 参照物
参照物 ：浏览器的自身,滚动才生效定位样式（网页标题导航滚动后位置不变）
1,以浏览器的定位,滚动才生效定位样式
2,占据初始位置,
条件
会被父级限制,一旦父级高度被滚动过去就会消失
父级一定要是有高度
浙公网安备 33010602011771号