为什么会有position定位
基于定位的常见需求
不同需求的解决方案
动画视频：
文字解析：
我们知道每一个元素都是盒子
期望布局像搭积木一样
从上往下挨个堆盒子就能完成各式各样的页面
然而多实现几个页面就会发现
文档流中任意一个元素位置调整都会影响到后面的元素
简直是牵一发动全身
每每扪心自问敢动吗
都只能回答不敢动不敢动
有一种脱离文档流的解决办法就是浮动
但浮动规则的局限性很大
它会向左上角或右上角靠过去
可惜这两个方向并不是布局的全部
日益增长的网页复杂度
和落后的css布局方式之间的矛盾越来越大
让定位需求变得越来越复杂：
1.让元素可以相对于它自己的位置定位
2.让元素可以在父元素范围内任意位置定位
3.让元素可以在屏幕范围内任意位置定位
对于第一种需求
让元素可以相对于它自己的位置定位
比如像这样
让元素相对于自身向下向右偏移一点
也许有人会想到用margin 或padding
但这样搞会影响到后面的元素
后面的元素又要想尽各种办法归位
过程曲折到可以写一部30集的连续剧
用一次就会感到万分沮丧甚至开始怀疑人生
所以我们希望有一种定位方式
让元素相对于自身偏移
且不会影响文档流
首先设置元素的postion为relative
让元素准备偏移
此时 从视觉上来看它并没有发生变化
接下来设置top right bottom或left来让元素位移
比如top: 20px
意味着元素上边界与它原本位置的上边界距离20像素
bottom:20px
则意味着元素下边界与它原本位置的下边界距离20 像素
left和right
一个控制左边界一个控制右边界 也是同理
这里值得注意的事情有两点
第一.相对定位的元素没有脱离文档流
第二.对非定位元素设置top等方向属性是没有效果的
对于第二种需求
让元素可以在某个祖先级容器范围内任意位置定位
比如像这样想让元素相对于某个祖先级元素容器定位
这就意味着元素不被局限在父容器内
它可以在更广阔的空间里放飞自我
浮动是肯定不行的
浮动只能在父容器里作威作福
这就需要一种完全脱离文档流的定位方式
position:absolute绝对定位
不再区分这个元素是块级元素还是行内元素
它的父容器会将它视为不存在
就好像设置了display为none一样
事实上这里设置display都是没有效果的
然后对它的祖先级元素容器设置标识 postion:relative
让它可以相对于被标识的元素定位
最后通过top和right设置它在指定容器中的位置
在这个例子里
被绝对定位的元素是没有设置宽和高的
它脱离了普通文档流并且不预留任何空间
因此它会按内容大小弹性地调整大小
当然也可以为它设置固定的宽高
它会按指定的宽高显示
不过如果是对于没有指定宽高的绝对定位元素
同时设置top right bottom和left
这些属性会同时生效
像这一段代码
绝对定位元素的top和bottom相等
left和right相等就能在目标容器中实现完美居中
对于第三种需求
让元素可以在屏幕范围内任意位置定位
比如像这样
要让元素保持在页面右下角在屏幕滚动时不会改变
是以视窗为画布来定位的
即使页面上下滚动
它还是会固定在相同的位置
所以为元素设置position:fixed，固定定位
这样的需求其实和前一个需求是非常类似的
同样的也会脱离文档流
只不过一个是相对于某个祖先级元素定位
一个是相对于视窗定位
因此想要让它显示出来
需要设置它的宽高和位置
不同的是
并不需要为它设置目标容器
因为它的目标就是页面的可视部分
现在你可以仔细看看这段CSS代码
在设置宽高后
设置right指定它 的右边界到视窗右边界的距离
再设置bottom指定它的下边界到视窗下边界的距离
在页面滚动后
它相对于视窗仍处于同一位置上
可以说有了定位的这几种方式
大大的扩展了布局的灵活性
它们分别是
absolute、fixed、relvtive
另外定位还需要一个默认值static
设置它后就能让元素回到当初
假装什么都没发生的样子
怎么样是不是很简单？
赶紧上手写点代码练习一下吧~
入QQ群：717415872 了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人哟,记得备注来自果冻课堂!
更多内容，欢迎加大师姐微信：it_xzy
网友评论