文章目錄

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

---

在一個(gè)網(wǎng)頁中，默認(rèn)情況下塊級元素獨(dú)占一行，是自上而下排列，行內(nèi)元素自左向右排列，但是在實(shí)際的網(wǎng)頁布局中往往需要改變這種單調(diào)的排列方式，使網(wǎng)頁內(nèi)容變得豐富多彩，CSS的浮動(dòng)和定位完美的解決了這個(gè)問題。

CSS的浮動(dòng)

CSS的浮動(dòng)可以通過float屬性進(jìn)行設(shè)置，默認(rèn)值為none（不浮動(dòng)）。

---

框1{float:none;}

---

框1{float:right;}

---

框1{float:left;}

---

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

---

---

CSS的定位

在網(wǎng)頁開發(fā)中，如果需要網(wǎng)頁中的某個(gè)元素在網(wǎng)頁的特定位置出現(xiàn)，例如彈出菜單，這時(shí)可以通過CSS的position屬性進(jìn)行設(shè)置，示例如下：

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

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

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

---

浮動(dòng)和定位的使用區(qū)別

其實(shí)浮動(dòng)的本意是用來解決圖片和文字排版問題的，但是由于它十分好用，被大部分開發(fā)者應(yīng)用到了網(wǎng)頁布局，并成為了公認(rèn)布局的一種方式。

該圖中4個(gè)粉色部分使用浮動(dòng)的知識(shí)對頁面進(jìn)行布局，然后使用絕對定位知識(shí)創(chuàng)建了一個(gè)浮動(dòng)的div元素。
需要注意的是，position: absolute會(huì)導(dǎo)致元素脫離文檔流，被定位的元素等于在文檔中不占據(jù)任何位置，在另一個(gè)層呈現(xiàn)。
float也會(huì)導(dǎo)致元素脫離文檔流，但還在文檔或容器中占據(jù)位置，把文檔流和其他float元素向左或向右擠，并可能導(dǎo)致?lián)Q行。

---

CSS層疊等級

z-index層疊等級屬性
當(dāng)一個(gè)父元素中的多個(gè)子元素同時(shí)被定位，定位元素之間有可能會(huì)發(fā)生重疊。

---

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

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

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

---

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。