天坑,CSS之定位Position(六分之五)

葉無聞 2019-06-28

Position定位

个人觉得position这个属性真的算是CSS的见面杀了。尤其是absolute,当年可是被虐的不轻。当然了,现在爱上了这个属性,谁用谁知道。

position属性

position是CSS的一个属性,地位较高,也是我们重点要说的一个属性。

对应了四个与之相关的位置属性,top、right、bottom、left,分别是指离上、右、下、左的距离,注意是设定后移动自身,不是挤走别的元素。

下文称位置属性即为top、right、bottom、left。

如果一个页面,不通过position的调整,在如今看来,将是极度难以忍受的。其主要包含下列属性值,不含继承的话,共有5个,以下一一例举:

  • static

    直译为静态,默认值,在其上使用position的位置属性无效。

  • relative

    直译为相对,与static近似,但在其上使用position的位置属性有效。

    注意,relative不会脱离文档流,具体见下面的图示。
  • absolute

    直译为绝对,向上寻找 第一个非static定位的标签,然后位置属性相对其有效。如果没有找到,则相对document。

    向上寻找:标签存在父子级关系,由子级向父级乃至祖宗级直到body为止。向下则相反。
    absolute会脱离文档流。
  • fixed

    直译为修正,简单粗暴,直接相对浏览器窗口显示区域定位。

    fixed会脱离文档流。
  • sticky

    直译为粘性,当相应内容显示在视觉范围内,则表现为relative定位,当内容即将逃出显示区域时,切换为fixed定位。

    sticky不会脱离文档流,即使换成了fixed。

以下针对5种定位做出图文描述

  • static

    天坑,CSS之定位Position(六分之五)

    static设置位置属性是无效的

    static为了方便理解还是与relative对比可以看出效果
  • relative

    天坑,CSS之定位Position(六分之五)

    relative设置位置属性有效,并且没有脱离原本文档流,只是显示位置变化了而已

  • absolute

    天坑,CSS之定位Position(六分之五)

    此图是证明相对于document

    absolute的最大难点就是具体相对谁的定位:

    absolute相对的是向上第一个不是static默认定位的元素,如果没有找到,则相对于document

    天坑,CSS之定位Position(六分之五)

    此图是证明相对于非static的父级标签,也可以自己试试,父级标签都是默认会如何。
  • fixed

    天坑,CSS之定位Position(六分之五)

    相对于浏览器窗口显示内容定位

    如果对fixed元素的父级元素设置了transform,则回导致fixed失效,这里有个印象就好。
  • sticky

    天坑,CSS之定位Position(六分之五)

    处在显示区域中是使用relative,当要逃出显示区域时切换为fixed

    新出的,兼容性注意下就好,非常适合做一下标题模块。


以上就是position相关的速讲知识,有疑问或者其他可以留言询问。

如果文章对你有一点帮助,我就非常的开心了。
喜欢我的文章,请关注我,定期发布技术文章,满满的干货。

源码相关

CodePen

相关推荐

Enjoyendless / 0评论 2020-06-11

CoderChang / 0评论 2014-06-04