在css的属性的列表中,定位属性(position)可以说是非常重要的,因为我们网页的布局,每个元素的位置的确定都离不开定位,因为定位的存在,所以我们的网页才会井井有条,错落有致。而且,定位也是我们面试时面试人员很喜欢询问的问题。他的重要性,不须要我在强调了。
对许多刚刚接触css定位的同志来说,可能运用其定位属性,都能达到自己所需要的效果,但说到理解,就显得理论匮乏,而不知所以然。所以我认为有必要,仔细的说一说定位的原理让我知其然,还要知其所以然,废话不多说,开始进入正题吧。
定位属性有三种属性值:1.relative;2.absolute;3.fixed;
(一)相对定位(relative)
所谓相对定位,就是相对自己本身的位置,作为参考,通过top,left,right,bottom来微调,(这里注意:是微调,也就是说不能大幅度的调节位置,这受他的特点限制的)
(1)特点:1.人走威风在;
就是说,我虽然离开的这个位置,但是你们其他任何元素都不能占用我之前的位置(就是这么霸道);而且我还要继续去我想去的地方。(那里也是我的)
来个例子:
:
正事因为这个特点,所以第三个盒子才没有侵占box2的位置。
2.不脱离标准文本流;
从上面的例子,很容易看出,box2虽然定位了,但是他仍然身居在标准文本之内。
(2)使用相对定位的情况:
1.对自己所处的位置进行微调;
2.作为父元素,当自己的子元素有使用绝对定位时,作为子元素的参考(子绝父相)
(二)绝对定位(absolute)
绝对定位有两种:1.以top实现定位:2.以bottom实现定位
先说一下绝对定位的特点:1.绝对定位脱离标准文档流;可以设置宽高了;
2.绝对定位的参考位置不固定,需要根据定位的元素确定;
(1)以top实现定位的情况
首先我要告诉大家,此时绝对定位元素参考的位置,是页面的左上角。
看个例子:
(2)以bottom实现的定位
和top不同,以bottom来实现定位,他参考的是我们首次打开浏览器首屏网页的左下角为参考点。
细心的你会发现,angelababy的背景发生了变化,但我们的div块,好像还是停留在原来的位置没有发生变化。这就是以bottom实现定位的特点。
我们再来看一个面试题:
通过这个面试题,我想你应该掌握了以bottom实现定位的原理了。
(3)子绝父相
就是说这种情况下,我们以已经定位父元素作为参考,来调节自己的位置,这里定位的不一定只能是其父亲,可以是他任何已经定位的祖先元素,定位元素选择距离本身最近的,已经定位的祖先元素作为参考点。
这种定位很好理解的,就不多了。
(3)固定定位(fixed)
这种定位是以浏览器窗口的左上角为参考点。
特点:1.元素脱离标准文本流;
2.不跟随网页的移动而移动,像是固定在窗口一样;
fixed这个属性值就是固定的意思,在背景属性里也有fixed属性值:background-attachment:fixed;它也是相对于窗口固定的意思,这就不多说了。
固定定位也是很好理解的,一点就通的那种,在网页上得效果是这样的: