CSS笔记12：position属性

1. 综述

position属性.png

---

2. 固定定位

position:fixed;
在使用定位属性时，一定要配合定位的坐标来使用；否则无法失效
left:表示定位的元素离左边多远

• 脱离了标准文档流
• 固定定位的元素层级比标准文档流里面的元素高，所以固定定位元素它会压盖住标准文档流里面的元素
• 固定定位元素不占空间
• 显示的位置不会随浏览器滚动而滚动

实现返回顶部

image.png

实现顶部菜单栏的固定

<style>
    .div1{
        /*菜单的绝对定位，实现固定效果*/
        position: fixed;
        left:0px;
        top:0px;
    }
</style>

---

3. 相对定位

position:relative;

• 相对定位，是相对自己原来位置而言
• 相对定位，没有脱离标准文档流
• 相对定位元素，若没有设置定位的坐标，则在原来的位置；若设置了位置，则会预留出空位
• 相对定位元素，会将标准文档流中的元素覆盖
• 相对定位元素坐标值可以是负值
  注意：相对定位元素一般会在留下原坑位，所以一般配合绝对定位来使用的
  实现下边缘线对齐效果
  image.png

---

4. 绝对定位

position:absolute;

• 绝对定位是相对祖先定位元素进行定位
• 祖先定位元素：
  绝对定位会先去查找其父级元素是否设置了定位的熟属性
  若有，则相对其父元素进行定位
  若没有，则继续向上一级元素查找
  若所有祖先级元素均没有，则会相对浏览器窗口（对应body元素）来进行定位

注意：

• 绝对定位元素脱离了标准文档流

• 绝对定位元素它不再占用空间

  
  image.png

• 绝对定位元素它会压盖标准文档流元素

  
  绝对定位元素它会压盖标准文档流元素

设置位置

• 未设置位置时，停留在原位置(上述3个特征)

• 设置位置后，
  因为父级box没有设置position,则向上一级查找body（即窗口），样式如下：

  
  image.png

延伸，父级添加position

为父级添加一个相对定位属性
若：父级元素与父级元素的父级元素均有定位属性时，则其相当于父级元素定位，即查找到定位属性的元素就停止查找
注意：祖先定位元素可以是相对定位，也可以是固定定位，还可以是绝对定位。但一般只会给其祖先定位元素设置相对定位属性。“子绝父相”

---

5. 拉手网练习

image.png

---

6. z-index

z-index