CSS之㉑絕對定位與相對定位·總結

                         QQ:3020889729                                                                                 小蔡

簡提相對定位

相對定位，指相對自身本來位置的定位。
不關心其它盒子的位置，是獨立的。

絕對定位

絕對定位模式：absolute

絕對模式特性：

• 特性一：當前無祖先級/祖先級沒有定位，那麼他以瀏覽器（網頁）爲基準來定位。
• 特性二：當前祖先級有定位，以最近的一級擁有定位的祖先級盒子爲基準來定位。

absolute特性展示

特性一展示：
css代碼：

* {
  /*將默認邊距清除 */
  margin: 0px;
  padding: 0px;
  /* 將定位屬性提前置零 */
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

.nav-2 {
  position: absolute;
  left: 40px;
  top: 20px;
  width: 120px;
  height: 80px;
  color: red;
  background-color: pink;
  text-align: center;
}

效果：

特性二展示：
css代碼：
（父盒子無定位）

* {
  /*將默認邊距清除 */
  margin: 0px;
  padding: 0px;
  /* 將定位屬性提前置零 */
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

.nav-1 {
  width: 120px;
  height: 80px;
  color: red;
  background-color: skyblue;
  text-align: center;
}

.nav-2 {
  position: absolute;
  left: 40px;
  top: 20px;
  width: 120px;
  height: 80px;
  color: red;
  background-color: pink;
  text-align: center;
}

效果：這裏就驗證了，如果父盒子無定位，那麼絕對定位盒子回去找定位盒子，如果都沒有，就以瀏覽器爲基準來定位。

css代碼：
（三個盒子，最外盒子有定位，次級盒子也有定位，看內盒子定位效果）

* {
  /*將默認邊距清除 */
  margin: 0px;
  padding: 0px;
  /* 將定位屬性提前置零 */
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

.nav-1 {
  position: relative;
  width: 400px;
  height: 200px;
  color: red;
  background-color: skyblue;
  text-align: center;
}

.nav-2 {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 300px;
  height: 160px;
  color: red;
  background-color: pink;
  text-align: center;
}

.nav-3 {
  position: absolute;
  left: 40px;
  top: 20px;
  width: 120px;
  height: 80px;
  color: red;
  background-color: black;
  text-align: center;
}

效果：