CSS学习笔记5

定位属性

定位属性 position

属性名：position
属性值：
relative 相对定位
absolute 绝对定位
fixed 固定定位
作用：设置定位的元素，需要根据某个参考元素发生位置的偏移

偏移量属性

定位的元素要发生位置的移动，必须搭配偏移量属性进行设置
水平方向：left、right
垂直方向：top、bottom
属性值：常用px为单位的数值，或者百分比

定位类型及特点

1.相对定位

属性值：relative，为相对的意思
参考元素：标签加载的原始位置

必须搭配偏移量属性才能发生位置移动

a.相对定位的性质

性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会给出原来占有的位置，即元素在显示效果上，原位留坑，形影不离

b.注意事项

注意1：偏移量属性的值是区分正负的
正数：表示偏移方向与属性名方向相反
负数：表示偏移方向与属性名方向相同

注意2：同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了left和right属性，只会加载left属性，垂直方向只加载top属性
小建议：书写时从水平方向和垂直方向各挑选一个属性进行组合

注意3：由于相对定位的参考元素是自身，left的正值等价于right的负值，top的正值等价于bottom的负值；实际使用时，可选择只是用left、top组合

c.实际应用

1.由于相对定位元素比较稳定，不会所以让身处位置，可将相对定位的元素作为后期绝对定位的参考元素，即后面会说到的子绝父相情况
2.相对定位比较稳定，可在占有原来位置的情况下，对加载效果区域进行位置调整，进行微调位置，或者对文字进行微调

绝对定位

属性值：absolute，绝对
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考body，必须搭配偏移量属性才能发生位置移动

a、绝对定位的性质

性质：绝对定位的元素脱离标准流，会让出标准流的位置，可设置宽高，也可随时定义位置，绝对定位的元素不设置宽高只能被内容撑开

注意1：绝对定位参考元素不是固定的，不同的参考元素已经不同的偏移量属性组合，会导致绝对定位元素的参考点不同，具体位移效果不同
注意2：在绝对定位中，由于参考点不同，left正值不再等价与right的负值

b、body为参考元素的参考点

用body为参考元素时，参考点的确定与偏移量方向有关
第一，如果有top参与的定位，参考点就是body页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒子模型属性最外面的左上角或右上角
第二，如果有bottom参与的绝对定位，参考点是body页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒子模型属性最外面的左下角或右下角
实际应用中，如果以body为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所有较少使用body作为参考元素

c、祖先级为参考元素

如果祖先级中有定位的元素，就不会去参考body
参考元素：参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先

根据决定定位的参考元素的定位类型不同，有三种定位的组合方式：
子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多数使用子绝父相的方式

d、祖先元素参考点

如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个定点，组合方向决定了参考点，绝对定位的元素只关心对比点和参考点之间的距离，会忽略参考元素额padding区域
left、top：参考点是祖先的border以内的左上顶点，对比点是盒子自身的左上角
right、top：参考点是祖先的border以内的右上顶点，对比点是盒子自身的右上角
left、bottom：参考点是祖先的border以内的左下顶点，对比点是盒子自身的左下角
right、bottom：参考点是祖先的border以内的右下顶点，对比点是盒子自身的右下角

固定定位

属性值：fixed，固定
参考元素：浏览器窗口
参考点：浏览器窗口的四个顶点，跟偏移量组合方向有关
注意：由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置

固定定位的性质：
固定定位的元素脱离标准流，让出标准流的位置，可设置宽高，根据偏移量属性可任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口之上

定位应用

1.压盖效果
所有的定位类型都可实现压盖效果，由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，日常工作中常见的压盖效果都是绝对定位制作的。

2.居中
定位的元素，如果想在参考元素中居中显示，可使用如下方法：
第一步，在居中的方向使用一个偏移量属性，例如left，设置属性值为50%，图片的左顶点移动到参考元素的中心位置，百分比形式的属性值，百分百参考的是参考元素的border以内的宽度、高度

第二步，给绝对定位的子盒子设置一个同方向的margin，例如margin-left，属性值为负的自身宽度的一半

注意：不论子盒子的宽度是否比参考元素更宽，都能使用上面的方法进行居中设置

3.扩展应用
解决标准流中，宽的子盒子在窄的父盒子中的居中，可设置大的子盒子相对定位，利用相对定位居中的方法进行居中
浮动的元素居中，在不改变原始浮动状态的情况下，可利用相对定位居中方法

压盖顺序

1、默认压盖顺序
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素，如果都是定位的元素，在HTML中后写的定位压盖先写的定位；因此，书写代码时，需要注意压盖效果，必须合理设置HTML元素的书写顺序
2、自定义压盖顺序
如果想更改定位元素的压盖顺序，可设置一个z-index属性
属性值：数字

自定义压盖顺序注意事项
a、属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的
b、如果属性值相同，比较HTML书写顺序，后写的压盖先写的
c、z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效
d、父子盒子模型中，如果父子盒子都是进行了定位，与其他的父子级有压盖的部分：
父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的
子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了z-index值，无论子级值是多少，都是父级的值大的自己压盖父级值小的子级，称为从父效应