Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
haizhilin2013 opened this issue Jun 17, 2019 · 6 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the css css label Jun 17, 2019
@xn213
Copy link

xn213 commented Jun 17, 2019

同:

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

@AndyZjy
Copy link

AndyZjy commented Jun 18, 2019

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

@yxkhaha
Copy link

yxkhaha commented Jun 18, 2019

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

@alowkeyguy
Copy link

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

@kruzabc
Copy link

kruzabc commented Jan 6, 2020

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

@MrZ2019
Copy link

MrZ2019 commented Dec 31, 2020

同:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

7 participants