定位

• • • 相对定位
    • 绝对定位
    • 固定定位
    • 改变定位的层级关系 z-index

第七天 定位

相对定位

特点

• 不脱离文档流
• 相对定位的层级要比其他层级要大（会覆盖在其他元素之上）
• 当发生位置改变时，原来的位置还被占用着
• 参照物是自己
• 给决定定位当参照物来用
• 当同时设置left 和right值时，left值生效，同时设置top和bottom 值时，top值生效

以下两点是相对定位常用的情况

1. 当相对定位自己改变位置时，又不影响其他元素，可以用相对定位
2. 给绝对定位当参照物来用

绝对定位

特点

• 脱离文档流
• 在不设置参照物时，参照物是body
• 在设置参照物时，需要满足以下两个条件：
  
  • 这个参照物必须是绝对定位的父级元素
  • 这个父级元素必须带有定位属性（相对，绝对，固定）
• 当绝对定位这个属性设置宽高为100%，继承的是参照物的宽高
• 当绝对定位这个元素不设置四个方向值时，这个绝对定位元素的前面有其它同级元素，默认会排在这个同级元素的后面
• 在不设置宽高时，宽高是由内容决定的
• 当同时设置left 和right值时，left值生效，同时设置top和bottom 值时，top值生效

固定定位

特点

• 参照物时浏览器可视窗口
• 在不设置宽高时，宽高是由内容决定的

固定定位一般用在网站的侧边栏，回到顶部的结构上

<a href="#">回到顶部<a>

当href标签属性值为空或者为一个"#"时，有一个回到顶部的作用

改变定位的层级关系 z-index

• 当多个元素是同级关系时，想让谁在上面就设置谁的z-index值
• 当定位的父级元素同时设置z-index值时，子元素与父元素相比较是不生效的

设置定位时，若是不给它top，left，bottom，right值时，他们会出现在文档流中会出现的位置