[CSS] CSS元素定位

元素定位

定位就是将指定元素放到页面的任意位置。通过定位可以任意摆放元素，比浮动强大。可以通过position来设置。

可以通过position来设置
可选值
static默认值，元素没有开启定位
ralative开启元素相对定位
absolute开启元素绝对定位
fixed开启元素固定地位（固定定位也是绝对定位的一种）

relative

• 通过position: relative;开启相对定位
• 开启后，可以通过left，right，top，bottom来设置元素的偏移量，left表示元素相对于其定位位置的左侧偏移量，通常偏移量只需要使用两个，就可以对元素进行定位。当开启了相对定位，而不设置偏移量时，元素不会发生任何变化
• 相对定位是相对于元素在文档流中原来的位置进行定位
• 相对定位的元素不会脱离文档，所以它下面的元素不会爬上去
• 相对定位会使元素提升一个层级，会覆盖在文档流元素的上面一层
• 相对定位不会改变元素的性质，块还是块，内联还是内联

absolute

• 通过position: absolute;开启绝对定位
• 开启后，可以通过left，right，top，bottom来设置元素的偏移量，left表示元素相对于其定位位置的左侧偏移量，通常偏移量只需要使用两个，就可以对元素进行定位。当开启了绝对定位，而不设置偏移量时，元素不会发生任何变化
• 绝对定位是相对于离他最近的开启了定位的祖先元素定位（一般情况开启了子元素的绝对定位都会同时开启父元素的相对定位），如果所有的祖先元素都没有开启定位，则相对于浏览器窗口定位
• 开启绝对定位后，会使元素脱离文档流，如果元素没有显示地设置width，width默认（auto）被内容撑开，没有内容就看不到这块内容。
• 绝对定位会使元素提升一个层级，会覆盖文档流的元素
• 绝对定位会改变元素的性质：内联元素会变成块元素

fixed

• 通过position: fixed;开启固定定位

• 固定定位也是一种绝对定位，它的大部分特点和absolute一样

  不同的是：
  1.固定定位永远都会相对于浏览器窗口进行定位
  2.固定定位会在浏览器窗口某个位置，不会随滚动条滚动而跑,可以把body设置为height: 5000px;来观察

层级

• 如果定位元素的层级一样，则下面的元素会盖住上面的元素
• 可以通过z-index属性设置元素的层级
  可以为z-index指定一个正值作为层级。数值越大，层级越高
  父元素的层级再高，也不会盖住子元素
  对于没有开启定位的元素不能使用z-index