position有哪些值?

terry HTML5 277

列举下position有哪些值。

回复

共1条回复 我来回复
  • 唐伯虎点蚊香的头像
    唐伯虎点蚊香
    前端小白,想各位学习!
    评论

    position 属性用于指定一个元素在文档中的定位方式。top、right、bottom 和 left 属性决定了该元素的最终位置。

    static: 默认值,没有定位,指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置,此属性下 top、right、bottom、left 和 z-index 属性无效。

    relative相对定位:元素先放置在未添加定位时的位置,在不改变页面布局的前提下调整元素位置(此时会在此元素为添加定位时所在位置留下空白)。position:relative 对 table-row、table-column、table-cell、table-caption 元素无效。

    absolute绝对定位:生成绝对定位的元素,元素会被移出正常文档流,并不为元素预留空间,通过制定元素相对于最近的非static定位祖先元素的偏移,来确定元素位置,绝对定位可以设置外边距合并(margin),并且不会与其他边距合并;

    fixed固定定位:元素的位置在屏幕滚动时不会发生改变位置

    sticky (黏性定位,吸顶效果):设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top、left等属性无效),当该元素的位置将要移出偏移范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。

    2年前 0条评论