CSS基础之定位

---

前言

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

---

1.定位的组成

定位 = 定位模式 +边偏移

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

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

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

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素的上边线的距离
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素的下边线的距离
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离

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.定位模式总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否（占有位置）	相对于自身位置移动	常用
absolute绝对定位	是（不占有位置）	带有定位的父级	常用
fixed固定定位	是（不占有位置）	浏览器可视区	常用
sticky粘性定位	否（占有位置）	浏览器可视区	当前阶段少