CSS布局中的position

记得从大一开始做Web前端的时候就被position这个属性搞得头晕脑胀,网上看了几篇文章也都不是十分精准,有的时候说的还互相冲突,导致我在接下来的两年时间里都是对这个属性敬而远之。但是今天又想重新过一遍CSS布局中的相关知识,看到position下定决心啃一啃,结果发现原来并没有那么困难。


position家族的几个兄弟姐妹

  • static
  • relative
  • fixed
  • absolute

假设

在开始讲这些属性值含义前,我们脑海中可以认为每个元素都有一个标签,这个标签表明了这个元素是否处于被定位的状态。我们姑且称之为定位标签,这个概念在接下来的阐述中会使用。

static

static这个就是相当于默认空属性,当我们在CSS定义时:

.static1 {
    /* 这里没有定义position */
    width : 200px;
    height : 200px;
}

就相当于:

.static2 {
    position : static; 
    width : 200px;
    height : 200px;
}

那么在这种两种情况下(position为空、position : static),我们说这个元素的定位标签false,除了static之外的任何属性值的定位标签都是true

relative

relative不加额外属性的时候其本身static的元素表现一样。

加上额外属性后

.relative1 {
    position : relative;
    top : -20px;
    left : 20px;
    width : 200px;
    height : 200px;
}
  • 设置topbottomleftright会使元素偏离正常位置。
  • 元素会根据原来应在位置进行偏移,在这个例子中应该是上部偏移-20px,左边偏移20px
  • 别的元素将不会填补该元素因为偏移所留下的空隙。如紫色的元素,并没有向上偏移20px,而是根据蓝色元素原本所在位置接着向下布局。

fixed

  • 属性设置为fixed的元素是相对于视窗来定位。许多网站的顶部和侧边导航就是fixed定位。
  • 设置topbottomleftright会使元素偏离正常位置。
  • 不会保留这个元素原本应该在页面的空隙。也就是说,对于其他普通元素来讲,它等于没有,不影响普通元素布局。
.fixed1 {
    position : fixed;
    bottom : 0;
    right : 0;
}

absolute

absolute在某种意义上与fixed非常类似,但是有一点,fixed永远都是相对于视窗元素来讲,而absolute是相对于定位标签true祖先元素来讲(这里终于用到我们刚开始说的定位标签概念了,如果不记得了,再往上面翻一下)。那么如果没有祖先元素或者祖先元素的定位标签都是false应该怎么办呢,这个时候就相对于文档的body元素来定位了。

absolute和fixed的异同点

  • 相同点

    • 改变行内元素的呈现方式,display被置为block;
    • 让元素脱离普通流,不占据空间;
    • 默认会覆盖到非定位元素上。
  • 不同点

    • absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

END

如果你对CSS布局的position仍然存有疑问,我强烈建议你移步这个网站。一定会有惊喜的!