2024年最全CSS基础之定位(1)，web前端面试问题技术高端

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

3.相对定位relative

=============================================================================

• 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待。（不脱标，继续保留原来位置）

• 相对定位并没有脱标，它最典型的应用是给绝对定位当爹的（子绝夫相）

4.绝对定位absolute

=============================================================================

• 绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的

• 如果没有祖先元素，或者祖先元素没定位，则以浏览器为准进行定位(Document 文档)

• 如果祖先元素父级有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置

• 绝对定位不再占用原先的位置 （脱标）

5.子绝父相

=====================================================================

子级使用绝对定位，父级则需要相对定位

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

• 父盒子需要加定位限制子盒子在父盒子内显示

• 父盒子布局时，需要占有位置，因此父亲只能是相对定位

6.固定定位fixed

==========================================================================

固定定位是元素固定于浏览器的可视区的位置

• 特点:

1. 以浏览器的可视窗口为参照点移动元素

2. 跟父元素没有任何关系

3. 不随滚动条滚动

4. 固定定位不再占有原先的位置(脱标)

7.粘性定位sticky

===========================================================================

粘性定位可以被认为是相对定位和固定定位的混合

• 特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）

2. 粘性定位占有原先的位置（相对定位的特点）

3. 必须添加top，left，right，bottom其中一个才有效