Skip to content

[css] 第63天 说说position的absolute和fixed共同与不同点分别是什么? #280

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第63天 说说position的absolute和fixed共同与不同点分别是什么?

Activity

xn213

xn213 commented on Jun 17, 2019

@xn213

同:

  1. 元素的block
  2. 脱离文档流,覆盖在正常元素
    不同:
    absolute相对元素可设定,而fixed相对于浏览器窗口固定,页面滚动位置不变
AndyZjy

AndyZjy commented on Jun 18, 2019

@AndyZjy

相同点:
1、都是用来给元素定位的属性,具有定位元素的一切特点(例如脱离文本流、不占据空间等等);
2、改变元素的呈现方式为display:block;
不同点:
1、fixed的父元素永远是浏览器窗口,不会根据页面滚动而改变位置;absolute的父元素是可以设置的,他会永远跟随父元素的位置的改变而改变。

yxkhaha

yxkhaha commented on Jun 18, 2019

@yxkhaha
  • 共同点:都能让元素定位
  • 不同点: position: absolute; 是根据定位父级定位,而position: fixed; 是根据浏览器窗口定位。
alowkeyguy

alowkeyguy commented on Jul 2, 2019

@alowkeyguy
  • 共同点,脱离文档流,形成独立的渲染区(可以用优化动画性能)
  • 不同点,position根据第一个不为static的祖先元素定位,fixed定位当元素祖先的 transform 属性非 none 时,容器定位由相对于视口改为相对于该祖先元素
kruzabc

kruzabc commented on Jan 6, 2020

@kruzabc

还有一点:
1.这俩都能触发BFC,与外界布局互不影响。
2.设置z-index属性能够产生层叠上下文。

smile-2008

smile-2008 commented on Dec 31, 2020

@smile-2008

同:

  1. 元素的block
  2. 脱离文档流,覆盖在正常元素
    不同:
    absolute相对元素可设定,而fixed相对于浏览器窗口固定,页面滚动位置不变
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@AndyZjy@alowkeyguy@kruzabc

        Issue actions

          [css] 第63天 说说position的absolute和fixed共同与不同点分别是什么? · Issue #280 · haizlin/fe-interview