position用法
position有七種樣式，分別是static、absolute、fixed、relative、sticky、initial、inherit，
一、static
這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。
二、absolute
這代表元素被放的地方將會是不依照另一個元素的絕對位置。相對位置偏移大小是依照 top、bottom、left、和 right 的值而定。而absolute屬性值也常跟z-index配合。
當一個塊級元素的position被表示成absolute時，其塊級元素的預設寬度已不再是100%。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> p { text-align: right; border: 1px solid red; } .p2 { position: absolute; } </style> </head> <body> <p class="p1">p1</p> <p class="p2">p2</p> <p class="p3">p3</p> </body> </html>
當子層被設定成 position:absolute; 時，父層則要明確指定 position:relative;，
子層的 top:0 起點才會是父層的起點，否則子層的起點有可能從父層的父層或是最頂點開始。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <style> div { border: 1px solid blue; margin-bottom: 10px; } p { display: inline-block; width: 30px; border: 1px solid red; } #d2 { position: relative; } #p2 { position: absolute; top: 10px; left: 10px; } </style> </head> <body> <div> <p>p1</p> <p>p1</p> <p>p1</p> </div> <div id="d2"> <p>a</p> <p id="p2">p2</p> <p>c</p> </div> <div> <p>p3</p> <p>p3</p> <p>p3</p> </div> </body> </html>
三、fixed
這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。
四、relative
這代表元素被放的地方將會是依照另一個元素的相對位置。相對位置偏移大小是依照 top、bottom、left、和 right 的值而定。
五、sticky
被設置此屬性的元素將會隨著使用者操縱捲軸的轉動而屬性將類似由
position : relative 轉變為 position : fixed ，最後結果就像是黏在瀏覽器視窗指定高度的上方。
注意，sticky 支援 chrome、firefox、edge 瀏覽器，但不支援 IE 瀏覽器。
引用w3cSchool的範例
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: sticky;
top: 0px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<p>Note: IE/Edge 15 and earlier versions do not support sticky position.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
六、initial
回復該元素的初始狀態。
七、inherit
繼承父元素的樣式。
範例一、
<!DOCTYPE html> <html> <head> <style> body { border: 5px solid blue; } img { border: 5px solid red; position: relative; top: 45px; } h1 { border: 5px solid green; } </style> </head> <body> <img src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84"> <h1>This is a heading</h1> </body> </html>
說明：
頁面上有三個元素，分別是body、img、h1，
那現在我們只針對img元素做偏移動作，將img元素往上頂45px間距可以使用top : 45px;，
請注意，
由於position沒有被設定則預設帶有static與relative特性，
要使用top前注意必須先明確設定position才行，
否則top是無效的，
所以必須針對img元素的position設定為relative，
這時img元素將會偏移45px的距離，並保留原來未偏移的位置；
另外來看如果將img元素的position設定為absolute會如何?
這時img元素不再擁有原來未偏移的位置，並與他的兄弟層h1元素不再有先來後到關係，
h1元素不認識img元素這位兄弟所佔有的位置，而img元素也只認父元素body父子關係而位置獨立。
範例二、
<!DOCTYPE html> <html> <head> <style> body { border: 5px solid blue; } img { border: 5px solid red; position: absolute; top: 45px; } h1 { border: 5px solid green; } h2 { border: 5px solid gray; } </style> </head> <body> <img src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84"> <h1>This is a heading</h1> <h2>This is a heading</h2> </body> </html>
此時再加入h2元素看其三者關係為何?
可以看出img元素position為absolute，
h1與h2元素為預設為relative，
可知h1與h2元素都承認兄弟關係而有先來後到位置，反之之img元素沒有。
另外值得一提的是，不管各元素怎麼設定position，
img元素所設的top偏移效果並不會影響到其他元素的位置。
範例三、
<!DOCTYPE html> <html> <head> <style> img { position: absolute; } h1 { /*position: absolute;*/ } </style> </head> <body> <div> <img src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84"> <h1>This is a heading</h1> </div> <div> <img src="http://www.w3schools.com/cssref/logocss.gif" width="95" height="84"> <h1>This is a heading</h1> </div> </body> </html>
在多組父層底下使用position: absolute屬性之效果為何?
單img元素使用position: absolute時，其基準高度將會以h1元素為主。
單h1元素使用position: absolute時，其基準高度將會以img元素為主。
那position為fixed呢?可想而知，
設定了fixed的元素其實就相當於說放棄了兄弟關係並且還放棄了父子關係，
此時的效果就是滑鼠卷軸不管怎麼捲，將會固定出現在瀏覽器被指定的位置上。
範例四、
說明如果child類別的position不特別設定absolute或relative而維持initial狀態時，會有什麼影響。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>brooke</title> <style> .child { background: red; width: 100px; height: 200px; border: 1px black solid; } .child { width: 32%; display: inline-block; /*position:absolute;*/ /*position: relative;*/ position: initial; } img { position: absolute; width: 100%; } </style> </head> <body> <div id="parent"> <div class="child"> <img src="http://i.imgur.com/eeWbh6X.png" alt="254*254"> <img src="http://i.imgur.com/eeWbh6X.png" alt="254*254"> </div> <div class="child"> <img src="http://i.imgur.com/eeWbh6X.png" alt="254*254"> <img src="http://i.imgur.com/eeWbh6X.png" alt="254*254"> </div> <div class="child"> <img src="http://i.imgur.com/eeWbh6X.png" alt="254*254"> <img src="http://i.imgur.com/eeWbh6X.png" alt="254*254"> </div> </div> </body> </html>
上例已指出如果child類別的position屬性設為initial狀態時，
則child類別底下的img元素會各自以child類別的相對位置為起點
(注意，child類別的display屬性已設為inline-block)，
做寬度100%視窗放大，因而讓畫面變得不正常。
參考資料：