css之position
Created at 2016-08-21 Updated at 2017-01-06 Category Front-End
引言
在学习position
之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求
如果没有定位,我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上,外加通过margin
和padding
调整一下间距,还有就是通过float
来浮动某些元素。做一些简单的网页这样就够了,例如N
年之前的yahoo
,虽然现在看来很low
但是有些情况下,这种按部就班的网页排版满足不了我们的要求,我们需要某些元素跑出来,悬浮在网页上面,而且需要给它指定一个位置。这时候我们就需要用到了position
,而且是非用不可。
relative
position
一共有四个可选属性:static/relative/absolute/fixed
。其中static
(静态定位)是默认值,即所有的元素如果不设置其他的position
值,它的position
值就是static
relative
会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。这是relative
的要点之一。还有第二个要点,就是relative
产生一个新的定位上下文
absolute
absolute
元素脱离了文档结构。和relative
不同,其他三个元素的位置重新排列了。只要元素会脱离文档结构,它就会产生破坏性,导致父元素坍塌。(此时你应该能立刻想起来,float
元素也会脱离文档结构)absolute
元素具有“包裹性”。之前<p>
的宽度是撑满整个屏幕的,而此时<p>
的宽度刚好是内容的宽度absolute
元素具有“跟随性”。虽然absolute
元素脱离了文档结构,但是它的位置并没有发生变化,还是老老实实的呆在它原本的位置,因为我们此时没有设置top
、left
的值absolute
元素会悬浮在页面上方,会遮挡住下方的页面内容
注意:
- 设置
absolute
会使得inline
元素被“块”化 - 设置
absolute
会使得元素已有的float
失效。不过float
和absolute
同时使用的情况不多 - 上文提到了
absolute
会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上”
fixed
其实fixed
和absolute
是一样的,唯一的区别在于:absolute
元素是根据最近的定位上下文确定位置,而fixed
永远根据浏览器确定位置
定位上下文
relative的定位
relative
元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素
fixed的定位
fixed
元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化
absolute的定位
absolute
的定位相对于前两者要复杂许多。如果为absolute
设置了top
、left
,浏览器会根据什么去确定它的纵向和横向的偏移量呢?答案是浏览器会递归查找该元素的所有父元素,如果找到一个设置了position:relative/absolute/fixed
的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位。如下两个图所示: