position属性 CSS的position属性完全解析(4/6)

本篇文章主要介绍了"position属性 CSS的position属性完全解析"，主要涉及到position属性方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 一、定位基本原理对于前端开发工程师来说，编写CSS是前端开发工作中必不可少的一个内容，在CSS中的position属性又是非常重要的一个方面。顾名思义，所谓po...

效果：A-1会根据A滚动条的滚动而滚动分析：当A-1的position设置为relative时，A-1元素还是遵循正常的文档流，因此A-1会受它父节点属性的影响示例1.3:(重点)

CSS Code复制内容到剪贴板

1. body{   
2. A {overflow: scroll;}   
3. A-1 {position: absolute;}   
4. }  

效果：A-1不会根据A滚动条的滚动而滚动
分析：当A-1的position设置为absolute时，A-1元素脱离了文档流，所以A-1不再受父节点属性的影响
注意：这时在父节点没有设置position的时，只会受到body节点的影响示例1.4:

CSS Code复制内容到剪贴板

1. body{   
2. A {overflow: scroll;}   
3. A-1 {position: fixed;}   
4. }  

效果：A-1不会根据A滚动条的滚动而滚动分析：当A-1的position设置为fixed时，A-1元素脱离了文档流，这时A-1只受body元素的影响

当父节点设置position值为非static情况下，子节点position的四种值的分析：示例2.1:

CSS Code复制内容到剪贴板

1. body{   
2. A {position：relative; overflow: scroll;}   
3. A-1 {}   
4. }  

效果：A-1会根据A滚动条的滚动而滚动分析：跟示例1.1一样，当父节点A设置了position之后，子节点A-1还是遵循正常的文档流，因此A-1会受它父节点属性的影响示例2.2:

CSS Code复制内容到剪贴板