学习了定位我们会发现可以有一些小技巧帮助我们更快地完成的任务。下面我来分享几种:
一、固定定位:固定在版心左侧位
1.让固定定位的盒子 left: 50%. 走到浏览器可视区(也可以看做版心) 的一半位置
2.让固定定位的盒子 margin-left:再走版心宽度的一半距离
二、绝对定位的水平居中算法(加了绝对定位/固定定位的盒子不能通过设置 margin: auto设置水平居中):
1. left: 50%;:让盒子的左侧移动到父级元素的水平中心位置
在定位后加上left: 50%;
2. margin-left: -50px;:让盒子向左移动自身宽度的一半
三、同理:绝对定位垂直居中算法:
1. top: 50%;:让盒子的左侧移动到父级元素的垂直中心位置
2. margin-top: -50px;:让盒子向左移动自身宽度的一半
四、子绝父相:
首先我们要明白什么才是子绝父相:
因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用
①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子
②父盒子需要加定位限制子盒子在父盒子内显示
③父盒子布局时,需要占有位置,因此父亲只能是相对定位
如我上面所写的代码,就是子绝父相的典型列子了
这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级
总结: 因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位
当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到
五、堆叠顺序(z-index):
层叠等级属性可以调整盒子的堆叠顺序
特性:
1. 属性值:正整数、负整数或 0,默认值是 0,数值越大,盒子越靠上
2. 如果属性值相同,则按照书写顺序,后来居上
3. 数字后面不能加单位
注意:z-index只能应用于相对定位、绝对定位和固定定位的元素,其他标准流、浮动和静态定位无效
六、定位的一些特性:
1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度
2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
所以说, 一个行内的盒子,如果加了浮动、固定定位和绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等
七、绝对定位(固定定位)会完全压住盒子:
绝对定位(固定定位) 会压住下面标准流所有的内容