定位 position

定位

定位属性结合四个方向值来用（left/top/right/bottom）

静态定位 static

• HTML元素的默认值，即没有定位，元素出现在正常的流中

• 静态定位的元素不会受到top, bottom, left, right影响

相对定位 relative

特点

• 不脱离文档流
• 相对定位的层级要比其他元素层级大（会盖在其他元素的上面）
• 当发生位置改变时，原来的位置还被占用着
• 参照物是本身（自己）
• 给绝对定位当参照物来用

在什么情况下使用相对定位？

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

绝对定位 absolute

特点

• 脱离文档流（原来的位置没有了）
• 当不设置参照物时，参照物是body
• 人为设置参照物时，必须满足两个条件
  • 这个参照物必须是绝对定位元素的父级元素（祖辈）
  • 这个父元素必须带有定位属性（相对、绝对、固定）

固定定位 fixed

特点

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

固定定位一般用在网站的侧边栏（辅导航）、回到顶部的结构上

<a href="#"></a>

当href标签属性值为空或者为一个"#"时，可以做到回到顶部的效果

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

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