文章目录

• 前言
• 1.定位的组成
• 2.静态定位static
• 3.相对定位relative
• 4.绝对定位absolute
• 5.子绝父相
• 6.固定定位fixed
• 7.粘性定位sticky
• 8.定位模式总结

前言

定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

1.定位的组成

定位 = 定位模式 +边偏移

• 定位模式决定元素的定位方式 ，它通过 CSS 的 position 属性来设置，其值可以分为四个：

• 边偏移就是定位的盒子移动到最终位置

2.静态定位static

• 静态定位是元素的默认定位方式，无定位的意思
• 静态定位按照标准流特性摆放位置，它没有边偏移

<style>    div { position: static;    }</style>

3.相对定位relative

• 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待。（不脱标，继续保留原来位置）
• 相对定位并没有脱标，它最典型的应用是给绝对定位当爹的（子绝夫相）

<style>    div { position: relative;    }</style>

4.绝对定位absolute

• 绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的
• 如果没有祖先元素，或者祖先元素没定位，则以浏览器为准进行定位(Document 文档)
• 如果祖先元素父级有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
• 绝对定位不再占用原先的位置 （脱标）

<style>    div { position: absolute;    }</style>

5.子绝父相

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

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
• 父盒子需要加定位限制子盒子在父盒子内显示
• 父盒子布局时，需要占有位置，因此父亲只能是相对定位

6.固定定位fixed

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

• 特点:
  1. 以浏览器的可视窗口为参照点移动元素
  2. 跟父元素没有任何关系
  3. 不随滚动条滚动
  4. 固定定位不再占有原先的位置(脱标)

<style>    div { position: fixed;    }</style>

7.粘性定位sticky

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

• 特点：
  1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  2. 粘性定位占有原先的位置（相对定位的特点）
  3. 必须添加top，left，right，bottom其中一个才有效

<style>    div { position: sticky; bottom: 10px; width: 200px; height: 200px; background-color: pink;    }</style>

8.定位模式总结