position屬性詳解

內容：

1.position屬性介紹

2.position屬性分類

3.relative相對定位

4.absolute絕對定位

5.relative和absolute聯合使用進行定位

6.fixed固定定位

 

 

1.position屬性介紹

position 屬性規定元素的定位類型

這個屬性定義創建元素佈局所用的定位機制。任何元素均可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移

position的值有：absolute、relative、fixed、static、inherit

 

 

2.position屬性分類

position屬性以下：

 1 position 屬性用於元素定位:
 2     static            默認
 3     relative          相對定位，相對於本身原本應該在的位置  
 4     absolute          絕對定位，行爲有點奇怪
 5     fixed             固定定位，基於 window 的絕對定位, 不隨頁面滾動改變
 6  非 static 元素能夠用 top left bottom right 屬性來設置座標 非 static 元素能夠用 z-index 屬性來設置顯示層次
 7  relative 是相對定位(相對自身定位)   absolute 徹底絕對定位, 忽略其餘全部東西, 往上浮動到 非 static 的元素

 

 

3.relative相對定位

position：relative -> 相對定位(偏離自身)

relative相對定位：相對定位是相對於該元素的原始位置，即以本身原始位置爲參照物。即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置(不脫離文檔流)；另外relative相對定位依據top，right，bottom，left等屬性偏移位置，其層疊經過z-index屬性定義

注：position：relative的一個主要用法：方便絕對定位元素找到參照物

實例：顯示平方

 1 HTML:
 2 <h3>relative實現相對定位</h3>
 3 <div class="relative">
 4     <div class="double">
 5           E = MC<span class="square">2</span>是質能公式
 6     </div>
 7 </div>
 8 
 9 CSS:
10 .relative .square {
11     position: relative;
12     top: -7px;
13     left: 0;
14     color: black;
15     font-size: 15px;
16 }

 

實現效果以下：

 

 

4.absolute絕對定位

position: absolute -> 絕對定位

absolute絕對定位：將元素從文檔流中拖出來，而後使用left、right、top、bottom屬性相對於其最接近的一個具備定位屬性的父包含塊進行絕對定位。若是不存在這樣的包含塊（就是它前面的div並無設置定位的屬性），則相對於body元素，即相對於瀏覽器窗口。

被設置了絕對定位的元素，在文檔流中是不佔據空間的，若是某元素設置了絕對定位，那麼它在文檔流中的位置會被刪除；

咱們能夠經過z-index來設置它們的堆疊順序 。

絕對定位使元素脫離文檔流，所以不佔據空間 ，普通文檔流中元素的佈局就當絕對定位的元素不存在時同樣，仍然在文檔流中的其餘元素將忽略該元素並填補他原先的空間。由於絕對定位的框與文檔流無關，因此它們能夠覆蓋頁面上的其餘元素。　　

 

 

5.relative和absolute聯合使用進行定位

position: relative／absolute -> 聯合使用進行相對定位  這個實際上就是absolute的大部分狀況下的做用

聯合定位實例效果以下(改變頁面大小後紅色box還在原來的相對位置上)：

 

代碼以下：

 1 HTML:
 2 <div class="relative-absolute">
 3     <div class="item">
 4         <div class="box left-bottom"></div>
 5     </div>
 6     <div class="item">
 7         <div class="box right-bottom"></div>
 8     </div>
 9     <div class="item">
10         <div class="box right-top"></div>
11     </div>
12 </div>
13 
14 CSS:
15 .relative-absolute .item{
16     height: 150px;
17     border: 1px solid red;
18     margin-bottom: 15px;
19     position: relative;
20 }
21 .relative-absolute .item .box{
22     height: 50px;
23     width: 50px;
24     background: #ff6f9a;
25     position: absolute;
26 }
27 .left-bottom{
28     left: 0;
29     bottom: 0;
30 }
31 .right-bottom{
32     right: 0;
33     bottom: 0;
34 }
35 .right-top{
36     right: 0;
37     top: 0;
38 }

 
總結：參照物用相對定位(relative)，子元素用絕對定位(absolute)，而且保證相對定位參照物不會偏移便可

 

 

6.fixed固定定位

position:fixed -> 固定在頁面某個位置

fixed元素以瀏覽器窗口爲參考物，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，元素不會隨着滾動，其層疊經過z-index屬性定義

注：

• 一個元素若設置了fixed; 則其不能設置float。由於這是兩個不一樣的流：浮動流與定位流，但relative能夠由於它本來所佔的空間仍然佔據文檔流       
• 在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置
• 常見的煩人的那些廣告以及返回頂部大部分都是使用fixed作的

 

返回頂部代碼：

 1 HTML:
 2 <div class="return-top">
 3     <a href="#top">返回頂部</a>
 4 </div>
 5 
 6 CSS:
 7 .return-top {
 8     position: fixed;
 9     right: 0;
10     bottom: 50px;
11     width: 66px;
12     padding: 5px;
13     border: 1px solid orangered;
14 }
15 
16 a {
17     color: #00b9ff;
18     text-decoration: none;
19 }

 

 

補充：

脫離文檔流3種方式：

• float
• absolute
• fixed