ichuan.net

自信打不死的心态活到老

关于 CSS position

CSS 的 position 属性以前了解的比较含糊,今天细看了下,得出了个总结:

  1. position 的取值为:static | relative | absolute | fixedstatic 是默认值,取值后三个的元素称为 “已定位元素”
  2. top, left, right, bottom 四个 css 属性只对 “已定位元素” 有效果
  3. relative 元素,top/bottomleft/right 设的是其相对于正常位置(static 时)的 上/下、左/右偏移
  4. absolute 元素,topleftrightbottom 设的是其各边相对于第一个 “已定位元素” 各边的偏移
  5. fixed 元素,和 absolute 元素类似,但它是相对于整个视图,即页面当前可见的范围
  6. relative 元素如果同时设置了 topbottom 属性,则忽略 bottom 值;如果同时设置了 leftright,则根据文字方向会忽略一个
  7. absolute 元素没有此限制,可以同时设置这 4 个属性

上面最后两点可以看下面的 demo:

CSS position

资料来自于 MDN。我觉得 MDN(https://developer.mozilla.org/en-US/docs)是最好的前端学习资料库。

Comments