1、CSS 定位 (Positioning)
position 屬性指定了元素的定位類型。
CSS 定位屬性
| position | 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。 |
| top | 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 |
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 |
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 |
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 |
| overflow | 設置當元素的內容溢出其區域時發生的事情。 |
| clip | 設置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。 |
| vertical-align | 設置元素的垂直對齊方式。 |
| z-index | 設置元素的堆疊順序。 |
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決于定位方法。
一切皆為框
div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。
您可以使用 display 屬性改變生成的框的類型。這意味著，
- 通過將 display 屬性設置為 block，可以讓行內元素（比如 元素）表現得像塊級元素一樣。
- 還可以通過把 display 設置為 none，讓生成的元素根本沒有框。
這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。
但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素。這種情況發生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：
<div> some text <p>Some more text.</p> </div>在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。
塊級元素的文本行也會發生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）。但是，這有助于理解在屏幕上看到的所有東西都形成某種框。
CSS 定位機制
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
CSS position 屬性
static 定位
HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。
靜態定位的元素不會受到 top, bottom, left, right影響。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div.static {position: static;border: 3px solid #73AD21; } </style> </head> <body><h2>position: static;</h2><p>使用 position: static; 定位的元素，無特殊定位，遵循正常的文檔流對象:</p><div class="static"> 該元素使用了 position: static; </div></body> </html>fixed 定位
元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> p.pos_fixed {position:fixed;top:30px;right:5px; } </style> </head> <body> ? <p class="pos_fixed">Some more text</p> <p><b>注意:</b> IE7 和 IE8 支持只有一個 !DOCTYPE 指定固定值.</p> <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> </body> </html>注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置與文檔流無關，因此不占據空間。
Fixed定位的元素和其他元素重疊。
relative 定位
相對定位元素的定位是相對其正常位置。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h2.pos_left {position:relative;left:-20px; } ? h2.pos_right {position:relative;left:20px; } </style> </head> ? <body> <h2>這是位于正常位置的標題</h2> <h2 class="pos_left">這個標題相對于其正常位置向左移動</h2> <h2 class="pos_right">這個標題相對于其正常位置向右移動</h2> <p>相對定位會按照元素的原始位置對該元素進行移動。</p> <p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p> <p>樣式 "left:20px" 向元素的原始左側位置增加 20 像素。</p> </body> ? </html>absolute 定位
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> h2 {position:absolute;left:100px;top:150px; } </style> </head><body> <h2>這是一個絕對定位了的標題</h2> <p>用絕對定位,一個元素可以放在頁面上的任何位置。標題下面放置距離左邊的頁面100 px和距離頁面的頂部150 px的元素。.</p> </body></html>
absolute 定位使元素的位置與文檔流無關，因此不占據空間。
absolute 定位的元素和其他元素重疊。
sticky 定位
sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位。
position: sticky; 基于用戶的滾動位置來定位。粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。
元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用
-webkit- prefix (查看以下實例)。
重疊的元素
元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）
一個元素可以有正數或負數的堆疊順序：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{position: absolute;left:0px;top:0px;z-index: -1; } </style> </head> <body> <h1>請勿在禁煙場所吸煙</h1> <img src="image/250x250px.gif" width="250" height="250" /> <p>因為圖像元素設置了 z-index 屬性值為 -1, 所以它會顯示在文字之后。</p></body> </html>
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意： 如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。
實例：
裁剪元素的外形
此示例演示如何設置元素的外形。該元素被剪裁成這種形狀，并顯示出來。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{position: absolute;clip:rect(0px,60px,200px,0px); } </style> </head> <body> <img src="image/250x250px.gif" width="250" height="250" /></body> </html>如何使用滾動條來顯示元素內溢出的內容
這個例子演示了overflow屬性創建一個滾動條，當一個元素的內容在指定的區域過大時如何設置以適應。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div.ex1 {background-color: lightblue;width: 110px;height: 110px;overflow: scroll; } ? div.ex2 {background-color: lightblue;width: 110px;height: 110px;overflow: hidden; } ? div.ex3 {background-color: lightblue;width: 110px;height: 110px;overflow: auto; } ? div.ex4 {background-color: lightblue;width: 110px;height: 110px;overflow: visible; } </style> </head> <body> <h1>overflow 屬性</h1> ? <p>如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。</p> ? <h2>overflow: scroll:</h2> <div class="ex1">鈴聲響起那刻，你用教鞭作槳，劃動那船只般泊在港口的課本 。課桌上，那難題堆放，猶如暗礁一樣布列，你手勢生動如一只飛翔的鳥，在講臺上揮一條優美弧線——船只穿過……天空飄不來一片云，猶如你亮堂堂的心，一派高遠。</div> ? <h2>overflow: hidden:</h2> <div class="ex2">鈴聲響起那刻，你用教鞭作槳，劃動那船只般泊在港口的課本 。課桌上，那難題堆放，猶如暗礁一樣布列，你手勢生動如一只飛翔的鳥，在講臺上揮一條優美弧線——船只穿過……天空飄不來一片云，猶如你亮堂堂的心，一派高遠。</div> ? <h2>overflow: auto:</h2> <div class="ex3">鈴聲響起那刻，你用教鞭作槳，劃動那船只般泊在港口的課本 。課桌上，那難題堆放，猶如暗礁一樣布列，你手勢生動如一只飛翔的鳥，在講臺上揮一條優美弧線——船只穿過……天空飄不來一片云，猶如你亮堂堂的心，一派高遠。</div> ? <h2>overflow: visible (默認):</h2> <div class="ex4">鈴聲響起那刻，你用教鞭作槳，劃動那船只般泊在港口的課本 。課桌上，那難題堆放，猶如暗礁一樣布列，你手勢生動如一只飛翔的鳥，在講臺上揮一條優美弧線——船只穿過……天空飄不來一片云，猶如你亮堂堂的心，一派高遠。</div> ? </body> </html>如何設置瀏覽器自動溢出處理
這個例子演示了如何設置瀏覽器來自動處理溢出。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div {background-color:#00FFFF;width:150px;height:150px;overflow:auto; } </style> </head> ? <body> <p>overflow 屬性規定當內容溢出元素框時發生的事情。</p> ? <div> 當你想更好的控制布局時你可以使用 overflow 屬性。嘗試修改 overflow 屬性為: visible, hidden, scroll, 或 inherit 并查看效果。 默認值為 visible。 </div> </body> ? </html>更改光標
這個例子演示了如何改變光標。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <p>請把鼠標移動到單詞上，可以看到鼠標指針發生變化：</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>總結
以上是生活随笔為你收集整理的1、CSS 定位 (Positioning)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 5、CSS 外边距合并
- 下一篇： CSS 基本样式