『HTML&CSS』定位

本篇博客介绍定位相关知识，包括相对定位、绝对定位和固定定位。还会介绍一下元素的层级。

定位

---

• 定位是指将指定的元素摆放到页面的任意位置。
• 可以通过position属性来设置元素的定位，可选值有：static（默认值，不开启定位，元素出现在正常的流中）、relative（开启元素的相对定位）、absolute（绝对定位）、fixed（固定定位）。
• 当开启了元素的定位（position属性值是一个非static的值）时，可以通过left、right、top、bottom四个属性来设置元素的偏移量。
  left：元素相对于其定位位置的左侧偏移量；
  right：元素相对于其定位位置的右侧偏移量；
  top：元素相对于其定位位置的上侧偏移量；
  bottom：元素相对与其定位位置的下侧偏移量。
• 通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直放向的一个偏移量。

相对定位

---

1. 当开启元素的相对定位以后，不设置偏移量时，元素不会发生任何变化；
   
   
2. 相对定位是相对于元素在文档流中原来的位置进行定位；
   
   
3. 相对定位的元素不会脱离文档流；
   
   
4. 相对定位会使元素提升一个层级；
   
   
5. 相对定位不会改变元素的性质，块还是块，内联还是内联。
   
   

绝对定位

---

1. 开启绝对定位，会使元素脱离文档流；
   
   
2. 开启绝对定位以后，如果不设置偏移量，元素的位置不会发生变化；
   
   
3. 绝对定位是对于离它最近的开启了定位的祖先元素定位，如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。一般情况下，开启了子元素的决定定位都会开启父元素的相对定位；
   
   
   
   
4. 绝对定位会使元素提升一个层级；
   
   
5. 绝对定位会改变元素性质，内联元素变为块元素。块元素的宽度和高度默认都是被内容撑开。
   
   

固定定位

---

• 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样。不同的是：固定定位永远都对于浏览器窗口左上角进行定位，固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动而改变。
• IE6不支持固定定位，想要实现固定定位的效果，必须使用JavaScript。
• 下面看一个例子：
  
  

元素的层级

---

• 如果定位元素的层级是一样的，则下边的元素会盖住上面的元素。
  
  
• 通过z-index可以设置元素层级，可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示。
  
  
• 但是注意，父元素的层级再高也不会盖住子元素。