深入理解CSS中的定位（position)
CSS中的定位（position)
使用CSS來定位頁面內層的位置，一直是比較難以掌握的事情，很多時候，往往被絕對定位的元素，總是以瀏覽器的左上角為座標原點，此時，如果瀏覽器的大小改變，被定義的層就會偏離設計想要的位置，讓人很撓頭。
其實，要想控制好層的絕對定位，只要理解CSS中關於定位（position）的定義，一切就會變得輕鬆簡單。
CSS中關於定位（position）是這樣定義的：
定位（position）允許使用者精確定義元素框出現的相對位置，可以相對於它通常出現的位置，相對於其上級元素，相對於另一個元素，或者相對於瀏覽器視窗本身。每個顯示元素都可以用定位的方法來描述，而其位置由此元素的包含塊來決定的。
包含塊（containing block）
在理解定位之前，首先，要先理解HTML檔案的結構，例如有一個html檔案內容如下：
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” />
<title>文件結構</title>
</head>
<body>
<h1>CSS規則</h1>
<p>樣式表由一些<strong>樣式規則</strong>組成。</p>
<ul>
<li>選擇符
<ul>
<li>類選擇符</li>
<li>ID選擇符</li>
<li><em>包含</em>選擇符</li>
</ul>
</li>
<li>屬性</li>
<li>值</li>
</ul>
</ul>
</body>
</html>
此文件對應的樹型結構，如圖2所示。
CSS大部分能力是基於元素的“父子”關係，在圖2的家族樹中，每個元素都是另一個元素的“父”或者“子”或者2者都是。例如：body既是html的子元素，又是h1的父元素，而html就是h1的祖先，h1則是html的子孫。
Body是所有瀏覽器能顯示的元素的祖先，而html是所有元素的祖先，也稱為“根元素”。
那為什麼定位了的元素還總是以瀏覽器視窗的左上角為座標呢？
因為並不是每個元素都能為其後輩元素生成一個包含塊。
建立包含塊的規則如下：
1. 根元素”的包含塊（也叫初始包含塊）由使用者代理生成，在HTML中，根元素是HTML元素，儘管有的瀏覽器會不正確地使用body元素。
2. 對於那些未絕對定位的非根元素來說，元素的包含塊設定為最近的塊級祖先元素的內容區邊沿。
3. 對那些使用絕對（absolute）作為定位（postition）的非根元素，包含塊設為最近的定位（postition）不是靜止（static）的祖先元素（任何型別）。有以下幾種情況：
a.如果祖先元素是塊級（block）元素，包含塊設為祖先元素的填充（padding）邊沿，也就是被邊框（border）約束的區域
b.如果祖先元素是內聯（inline）元素，包含塊設為祖先元素的內容邊沿。
因此，絕對定位的元素往往以瀏覽器可視區域的左上為座標原點來進行定位了。
在CSS中可是使用position屬性來在不同的定位型別中選擇。
語法：
position : static | absolute | fixed | relative | inherit
其各引數含義是：
static
relative : 相對，物件不可層疊，但將依據left，right，top，bottom等屬性在正常文件流中偏移位置
absolute : 絕對，將物件從文件流中拖出，通過width、height、left，right，top，bottom等屬性與margin、padding、border進行絕對定位，絕對定位的元素可以有邊界，但這些邊界不壓縮。而其層疊通過z-index屬性定義。
fixed : 懸浮，使元素固定在螢幕的某個位置，其包含塊是可視區域本身，因此它不隨滾動條的滾動而滾動。（IE5.5+不支援此屬性。）
inherit : 這個值從其上級元素繼承得到。
示例：
div {
position: absolute;
bottom: 1in;
left: 1in;
right: 1in;
top: 1in;
}
div {
position:relative;
top:-3px;
left:6px;
}
既然瞭解了包含塊的概念，那麼對於相對定位和絕對定位的關係，就很好掌握了。
例如，現在需要把頁面內容整體居中，然後再將其中某些層絕對定位的話，那就要把最外面的層設定定位屬性。
<body>
<div id=”box”>
<div id=”nav”>
<p>每個顯示元素都可以用定位的方法來描述，而其位置由此元素的<strong>包含塊</strong>來決定的。</p>
</div>
</div>
</body>
此時，如果你要對nav絕對定位，則需設定css：
body {
margin:0;
padding:0;
text-align:center;
}
#box{
background:#ff0;
position:relative; / 使box層成為其子孫元素的包含塊 /
width:500px;
height:200px;
margin:0 auto;
}
#nav {
background:#ccc;
position:absolute; / nav層將在box層的邊框範圍內絕對定位 /
top:20px;
left:40px;
width:200px;
}
其顯示效果如圖3所示。
因此，掌握了包含塊的概念，定位就變得不那麼困難了。
本文部分知識來源於：《CSS權威指南》
相關推薦
深入理解CSS中的定位（position)
CSS中的定位（position) 使用CSS來定位頁面內層的位置，一直是比較難以掌握的事情，很多時候，往往被絕對定位的元素，總是以瀏覽器的左上角為座標原點，此時，如果瀏覽器的大小改變，被定義的層就會偏離設計想要的位置，讓人很撓頭。 其實，要想控制好層的絕對定位，只
深入理解css中的position定位和z-index屬性
注：本文僅供交流使用，如有不當之處歡迎批評指正，但請註明詳由，謝謝！由於平時不太用到，所以過去寫css的時候對於position屬性的absolute、relative值理解比較模糊，對於z-index的層疊更是摸不著頭腦，除了理解的因素外，各個瀏覽器的不同解析結果也是一個大
深入理解css中position屬性及z-index屬性
在網頁設計中，position屬性的使用是非常重要的。有時如果不能認識清楚這個屬性，將會給我們帶來很多意想不到的困難。 position屬性共有四種不同的定位方法，分別是static、fixed、relative、absolute,sticky。最後將會介紹和positio
CSS 各種定位（position）方式的區別
spa html posit 空間 不顯示 保留 clas 絕對定位 不可見 static：靜態定位是position的默認值，元素框正常生成，也就是沒有定位時的正常顯示。 relative：相對定位 用法一：元素相對自身的原位置偏移某個距離，但是原本
深入理解CSS中的層疊上下文和層疊順序
零、世間的道理都是想通的 在這個世界上，凡事都有個先後順序，凡物都有個論資排輩。比方說食堂排隊打飯，對吧，講求先到先得，總不可能一擁而上。再比如說話語權，老婆的話永遠是對的，領導的話永遠是對的。 在CSS屆，也是如此。只是，一般情況下，大家歌舞昇平，看不出什麼差異，即所謂的眾生平等。但是，當
深入理解CSS絕對定位
CSS中有3種定位機制：普通流，浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。顧名思義，普通流中元素框的位置由HTML元素的位置決定。塊級框一個接一個地垂直排列，框之間的垂直距離由框的垂直外邊距計算出。在本文中，我們主要講解3種定位機制之一的絕對定位，這就需要深入瞭解relative（相對定位），
深入理解 CSS（Cascading Style Sheets）中的層疊（Cascading）
標題中的 Cascading 亦可以理解為級聯。 進入正文，這是一個很有意思的現象。可以直接跳到 總結一下 部分，看完再回過頭來閱讀本文。 引子 假設我們有如下結構： <p class="txt" style="color:red">12345678
深度理解CSS中塊級元素與行內元素的區別（個人易錯點）
水平 切換 otto display pad 情況 易錯點 寬度 塊級元素 區別一： 塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度 行內：行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。 區別二： 塊級：塊級元素可以設置寬高 行內
CSS學習筆記——CSS中定位的浮動float（20171129002）
itl charset ear 浮動元素 有效 而是 mark 盒模型 頁面 昨天在解決了盒模型的問題之後又出現了新的知識模糊點：浮動和絕對定位？今天先解決浮動相關的問題，首先列舉出想要解決的問題： 1.浮動到底是怎麽樣的？ 2.浮動對元素的影響有什麽？ 3.浮動主要用來幹
理解css中的position屬性
理解css中的position 兩種型別的定位 static型別：只有一個值position: static.position預設值 relative型別：包括三個值,這三個值會相互影響，允許你以特定方式移動元素 position: relative position:
深入理解Java中的同步靜態方法和synchronized（class）程式碼塊的類鎖 深入理解Java併發synchronized同步化的程式碼塊不是this物件時的操作
一.回顧學習內容 在前面幾篇部落格中我我們已經理解了synchronized物件鎖、物件鎖的重入、synchronized方法塊、synchronized非本物件的程式碼塊， 連結：https://www.cnblogs.com/SAM-CJM/category/1314992.h
深入理解java中的介面 （Interface）
概念 我們知道java中是單繼承的，這就有了很多的限制，比如我們需要多繼承的時候但是不能用多繼承，這時候怎麼辦呢？就引入了介面的概念，它彌補了java中單繼承的缺陷，這一點非常的好，如果要約定子類的實現要求並避免單繼承侷限就需要使用介面。 那麼什麼是介面呢？
深入理解vue中的slot與slot-scope （簡單易懂）
走在前端的大道上 插槽，也就是slot，是元件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父元件來決定。 實際上，一個slot最核心的兩個問題在這裡就點出來了，是顯示不顯示和怎樣顯示。 由於插槽是一塊模板，所以，對於任何一個元件，從模板種類的角度來分，其實都可以
深入理解Java中的同步靜態方法和synchronized（class）程式碼塊的類鎖
一.回顧學習內容 在前面幾篇部落格中我我們已經理解了synchronized物件鎖、物件鎖的重入、synchronized方法塊、synchronized非本物件的程式碼塊， 我們來總結一下，上面幾篇講到內容： 1.建立執行緒類的兩個方式：繼承Thread類和實現Runable介面。 2.瞭解了Th
前端知識小結-CSS定位（position）的分類及用法
在複習的過程中總結了一些知識點，在以後會陸續分享給大家，有不對的地方也請大家指正！！！ CSS定位分類及用法 1.預設定位 position:static 在不寫的情況下預設為預設定位 2.絕對定位 position:absoluted 相對於最近的父元素定位
CSS定位（position屬性）以及top和magin-top的區別
CSS 定位 (Positioning) 屬性允許我們對元素進行定位。 CSS 定位和浮動：CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。 定位的基本思想很簡單，它允許我
Yii2基礎筆記（三）：深入理解Yii2中的view
首先，yii2 view在vendor/views中也是一個物件 一、render方法 任意一個controller都有5種render方法： 1.render(view檔名，待傳遞的引數陣列);如： `render('about',['num'=&
深入理解C#中的泛型（一）
為什麼要有泛型？ 請大家思考一個問題：由你來實現一個最簡單的氣泡排序演算法，如果沒有使用泛型的經驗，可能會毫不猶豫的寫出以下程式碼： public class SortHelper { //引數為int陣列的氣泡排序 publi
深入理解C#中的泛型（二）
接著深入理解C#中的泛型（一），這篇文章主要講解泛型類、泛型方法、泛型與集合。 泛型類 如果我們想對一個類的所有泛型方法進行統一引數約束，我們把約束條件加在類上，此時這個類便成為泛型類，如下：
z-index和position的深入理解-css
在網頁設計中，position屬性的使用是非常重要的。有時如果不能認識清楚這個屬性，將會給我們帶來很多意想不到的困難。並且css中的z-index屬性，簡單而又複雜；搞不懂裡面的原理，很難實現自己的功能。這次記錄下自己的查詢。 詳情見：深入理解css中的posi