CSS三個重要的定位屬性，使用頻率超高，定位屬性詳解

CSS HTML 0verflow 文章小海前端小海前端 2017-10-19

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，並且是經過我係統歸納過的。

【技術等級】初級

【承接文章】《CSS改變元素的定位模式，重要的樣式屬性，定位屬性詳解》

本文承接上一篇文章，繼續為大家講解上一篇中剩餘的三個CSS定位屬性。本文屬於前端開發的初級教程，適合於剛剛開始接觸CSS技術的學習者。

CSS三個重要的定位屬性，使用頻率超高，定位屬性詳解

本文介紹上一篇文章中剩餘的三個CSS定位屬性，分別是：

z-index
visibility
overflow

一、設置定位元素在頁面中的前後順序：

CSS三個重要的定位屬性，使用頻率超高，定位屬性詳解

CSS技術利用 z-index 屬性來對HTML定位元素調整在頁面中的前後順序

該屬性的取值：沒有單位的整型數字。

該屬性也被稱為定位元素的“z軸”。是指重疊定位元素的前後關係。該屬性取值數字越大越靠前；取值數字越小越靠後。

實例：設頁面中有兩個絕對定位的塊級元素，尺寸均為200px*200px。id屬性取值為first的塊級元素，背景顏色為紅色，距離頁面左上角的位置為：左側距離100px，頂部距離100px。id屬性取值為second的塊級元素，背景顏色為藍色，距離頁面左上角的位置為：左側距離150px，頂部距離150px。設置這兩個塊級元素的z軸數據。

HTML代碼如下所示：

<div id=”first”></div>
<div id=”second”></div>

CSS代碼如下所示：

#first{
width:200px; height:200px;
background-color:#ff0000;
position:absolute;
left:100px; top:100px;
z-index:1000;
}
#second{
width:200px; height:200px;
background-color:#0000ff;
position:absolute;
left:150px; top:150px;
z-index:1200;
}

上述代碼中，#first的z軸為1000，#second的z軸為1200，因此，藍色的塊級元素將覆蓋紅色的塊級元素的一部分。

二、設置定位元素的可見性：

CSS三個重要的定位屬性，使用頻率超高，定位屬性詳解

CSS技術利用 visibility 屬性來設置HTML定位元素的可見性。

該屬性的取值如下：

visible，定位元素可見。
hidden，定位元素不可見。

新的問題：在CSS中設置定位元素不可見，有以下兩種方法。

方法一：#element{display:none;}
方法二：#element{visibility:hidden;}

上述這兩種方法都可以隱藏定位元素，那麼它們的區別是什麼呢？

它們的區別在於：在元素流式定位的情況下，當display屬性取值為none時，可以將對象本身和對象位置均隱藏；當visibility屬性取值為hidden時，只能隱藏對象本身，而不能隱藏對象位置，即隱藏的對象依然保留其可見時的位置。

實例：設頁面中有兩個流式定位的塊級元素，尺寸均為200px*200px。id屬性取值為first的塊級元素，背景顏色為紅色。id屬性取值為second的塊級元素，背景顏色為藍色。由於採用流式定位，所以兩個塊級元素在頁面中的佈局應該是紅色的在上，藍色的在紅色的下方。

HTML代碼如下所示：

<div id=”first”></div>
<div id=”second”></div>

CSS代碼如下所示：

#first{
width:200px; height:200px;
background-color:#ff0000;
}
#second{
width:200px; height:200px;
background-color:#0000ff;
}

問題一：利用display屬性隱藏#first塊級元素。

這需要在#first的CSS代碼中加入此句：display:none;

同學們嘗試一下，此時頁面中只會出現藍色的#second塊級元素，且出現在頁面的左上角，頂替了#first塊級元素的位置。

問題二：利用visibility屬性隱藏#first塊級元素。

這需要在#first的CSS代碼中加入此句：visibility:hidden;

同學們嘗試一下，此時頁面中紅色的#first塊級元素消失，但是位置依然存在，即藍色的#second塊級元素仍舊出現在它原有的位置，並沒有頂替#first塊級元素的位置。

三、設置定位元素的溢出特性：

CSS三個重要的定位屬性，使用頻率超高，定位屬性詳解

CSS技術利用 overflow 屬性來設置HTML定位元素的溢出特性

首先，讓我們瞭解一下什麼叫做“溢出”：

當定位元素內部內容的量大於定位元素作為容器本身的寬高時，即容器無法再將內容全部存放在容器內部，我們說此時發生了“溢出”。

該屬性的取值如下：

visible，默認值，可見。該取值指溢出部分照常顯示。
hidden，隱藏。該取值指溢出部分隱藏。
scroll，滾動。該屬性指無論是否溢出均產生滾動條。
auto，自動。該屬性指當溢出時產生滾動條；若未發生溢出，則不產生滾動條。

實例：頁面中有一個<div></div>塊級元素，其id屬性取值為“box”，寬度和高度均為150px。在該塊級元素的內部複製了大量的文本，使得這個容器的尺寸無法完全盛放這些文本。這就發生了“溢出”現象。

HTML代碼如下所示：

<div id=”box”>大量的文本……</div>

CSS代碼如下所示：

#box{
width:150px; height:150px;
background-color:#ff5857;
text-align:justify;
font-size:14px;
text-indent:28px;
}

大家看此段CSS代碼。如果在#box塊級元素的CSS代碼中分別添加下列代碼：

overflow:hidden; 無法顯示在#box塊級元素內部的文本將隱藏。
overflow:scroll; 無法顯示在#box塊級元素內部的文本將隱藏，同時塊級元素的右側和底部出現垂直滾動條和水平滾動條。
overflow:auto; 無法顯示在#box塊級元素內部的文本將隱藏，右側將出現垂直滾動條。
overflow:visible; 無法顯示在#box塊級元素內部的文本仍舊顯示出來，就像沒有使用overflow屬性一樣。

文章預告

下一篇文章中，小海老師總結出了幾個跟定位有關的實例，帶著大家一同看一看定位屬性都有哪些應用領域，對定位技術有疑問的學習者千萬不要錯過！

小海教材

如果大家希望得到更加全面的關於HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都儘量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。