CSS教程:CSS中的定位（position）
互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 19:27:15 作者：佚名 
我要評論
我要評論 使用CSS來定位頁面內(nèi)層的位置，一直是比較難以掌握的事情，很多時候，往往被絕對定位的元素，總是以瀏覽器的左上角為坐標原點，此時，如果瀏覽器的大小改變，被定義的層就會偏離設(shè)計想要的位置，讓人很撓頭。
其實，要想控制好層的絕對定位，只要理解CSS中關(guān)于定位
使用CSS來定位頁面內(nèi)層的位置，一直是比較難以掌握的事情，很多時候，往往被絕對定位的元素，總是以瀏覽器的左上角為坐標原點，此時，如果瀏覽器的大小改變，被定義的層就會偏離設(shè)計想要的位置，讓人很撓頭。
其實，要想控制好層的絕對定位，只要理解CSS中關(guān)于定位（position）的定義，一切就會變得輕松簡單。
CSS中關(guān)于定位（position）是這樣定義的：
定位（position）允許用戶精確定義元素框出現(xiàn)的相對位置，可以相對于它通常出現(xiàn)的位置，相對于其上級元素，相對于另一個元素，或者相對于瀏覽器視窗本身。每個顯示元素都可以用定位的方法來描述，而其位置由此元素的包含塊來決定的。
包含塊（containingblock）是格式編排發(fā)生的關(guān)聯(lián)場景，例如，一個加粗的元素的包含塊可以是該元素所出現(xiàn)的段落，如圖1所示。
在理解定位之前，首先，要先理解HTML文件的結(jié)構(gòu)，例如有一個html文件內(nèi)容如下：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>文檔結(jié)構(gòu)</title>
</head>
<body>
<h1>CSS規(guī)則</h1>
<p>樣式表由一些<strong>樣式規(guī)則</strong>組成。</p>
<ul>
<li>選擇符
<ul>
<li>類選擇符</li>
<li>ID選擇符</li>
<li><em>包含</em>選擇符</li>
</ul>
</li>
<li>屬性</li>
<li>值</li>
</ul>
</ul>
</body>
</html>
此文檔對應的樹型結(jié)構(gòu)，如圖2所示。
CSS大部分能力是基于元素的“父子”關(guān)系，在圖2的家族樹中，每個元素都是另一個元素的“父”或者“子”或者2者都是。例如：body既是html的子元素，又是h1的父元素，而html就是h1的祖先，h1則是html的子孫。
Body是所有瀏覽器能顯示的元素的祖先，而html是所有元素的祖先，也稱為“根元素”。
那為什么定位了的元素還總是以瀏覽器窗口的左上角為坐標呢？
因為并不是每個元素都能為其后輩元素生成一個包含塊。
建立包含塊的規(guī)則如下：
1.根元素”的包含塊（也叫初始包含塊）由用戶代理生成，在HTML中，根元素是HTML元素，盡管有的瀏覽器會不正確地使用body元素。
2.對于那些未絕對定位的非根元素來說，元素的包含塊設(shè)置為最近的塊級祖先元素的內(nèi)容區(qū)邊沿。
3.對那些使用絕對（absolute）作為定位（postition）的非根元素，包含塊設(shè)為最近的定位（postition）不是靜止（static）的祖先元素（任何類型）。有以下幾種情況：
a.如果祖先元素是塊級（block）元素，包含塊設(shè)為祖先元素的填充（padding）邊沿，也就是被邊框（border）約束的區(qū)域
b.如果祖先元素是內(nèi)聯(lián)（inline）元素，包含塊設(shè)為祖先元素的內(nèi)容邊沿。
因此，絕對定位的元素往往以瀏覽器可視區(qū)域的左上為坐標原點來進行定位了。
在CSS中可是使用position屬性來在不同的定位類型中選擇。
語法：
position:static|absolute|fixed|relative|inherit
其各參數(shù)含義是：
static:靜態(tài)（默認），無特殊定位。
relative:相對，對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置
absolute:絕對，將對象從文檔流中拖出，通過width、height、left，right，top，bottom等屬性與margin、padding、border進行絕對定位，絕對定位的元素可以有邊界，但這些邊界不壓縮。而其層疊通過z-index屬性定義。
fixed:懸浮，使元素固定在屏幕的某個位置，其包含塊是可視區(qū)域本身，因此它不隨滾動條的滾動而滾動。（IE5.5 不支持此屬性。）
inherit:這個值從其上級元素繼承得到。
示例：
div{
position:absolute;
bottom:1in;
left:1in;
right:1in;
top:1in;
}
div{
position:relative;
top:-3px;
left:6px;
}
既然了解了包含塊的概念，那么對于相對定位和絕對定位的關(guān)系，就很好掌握了。
例如，現(xiàn)在需要把頁面內(nèi)容整體居中，然后再將其中某些層絕對定位的話，那就要把最外面的層設(shè)置定位屬性。
<body>
<divid="box">
<divid="nav">
<p>每個顯示元素都可以用定位的方法來描述，而其位置由此元素的<strong>包含塊</strong>來決定的。</p>
</div>
</div>
</body>
此時，如果你要對nav絕對定位，則需設(shè)置css：
body{
margin:0;
padding:0;
text-align:center;
}
#box{
background:#ff0;
position:relative;/*使box層成為其子孫元素的包含塊*/
width:500px;
height:200px;
margin:0auto;
}
#nav{
background:#ccc;
position:absolute;/*nav層將在box層的邊框范圍內(nèi)絕對定位*/
top:20px;
left:40px;
width:200px;
}
其顯示效果如圖3所示。
因此，掌握了包含塊的概念，定位就變得不那么困難了。
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性，用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實現(xiàn)復雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26
