文章目錄

• CSS的浮動
• • 框1{float:none;}
  • 框1{float:right;}
  • 框1{float:left;}
  • 框1、2、3{float:left;}
• CSS的定位
• 浮動和定位的使用區別
• CSS層疊等級

---

在一個網頁中，默認情況下塊級元素獨占一行，是自上而下排列，行內元素自左向右排列，但是在實際的網頁布局中往往需要改變這種單調的排列方式，使網頁內容變得豐富多彩，CSS的浮動和定位完美的解決了這個問題。

CSS的浮動

CSS的浮動可以通過float屬性進行設置，默認值為none（不浮動）。

---

框1{float:none;}

---

框1{float:right;}

---

框1{float:left;}

---

框1、2、3{float:left;}

---

---

CSS的定位

在網頁開發中，如果需要網頁中的某個元素在網頁的特定位置出現，例如彈出菜單，這時可以通過CSS的position屬性進行設置，示例如下：

position:relative; /*相對定位方式*/ left:30px; /*距左邊線30px*/ top:10px; /*距頂部邊線10px*/

用于設置菜單定位方式的常用屬性值如下表所示

用于設置元素具體位置的常用屬性值如下表所示。

---

浮動和定位的使用區別

其實浮動的本意是用來解決圖片和文字排版問題的，但是由于它十分好用，被大部分開發者應用到了網頁布局，并成為了公認布局的一種方式。

該圖中4個粉色部分使用浮動的知識對頁面進行布局，然后使用絕對定位知識創建了一個浮動的div元素。
需要注意的是，position: absolute會導致元素脫離文檔流，被定位的元素等于在文檔中不占據任何位置，在另一個層呈現。
float也會導致元素脫離文檔流，但還在文檔或容器中占據位置，把文檔流和其他float元素向左或向右擠，并可能導致換行。

---

CSS層疊等級

z-index層疊等級屬性
當一個父元素中的多個子元素同時被定位，定位元素之間有可能會發生重疊。

---

顯示器使用x軸和y軸來表示二維平面的位置屬性，為了表示三維立體的概念，圖中上下層的立體關系，引入了z-index屬性來表示z軸的深度。

z-index值可以控制定位元素在垂直于顯示屏方向（z軸）上的堆疊順序，值大的元素發生重疊時會在值小的元素上面，其取值可為正整數、負整數和0，默認值為0。

注意： z-index只能在position屬性值為relative或absolute或fixed的元素上有效，z軸可以理解為屏幕的深度，z-index值越大的元素越靠近用戶。

---

總結

以上是生活随笔為你收集整理的CSS浮动、定位与z-index层叠等级详解——响应式Web系列学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。