CSS中position屬性( absolute | relative | static | fixed )詳解

時間  2019-12-07
標籤 css position 屬性 absolute relative static fixed 詳解 欄目 CSS 简体版
原文   原文鏈接

咱們先來看看CSS3 Api中對position屬性的相關定義：css

  • static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。
  •  relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。
  •  absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。
  •  fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性定義。

怎麼樣，是否是仍是很迷糊~~ 不要緊，下面就從幾個基礎概念一一給你們詳述：html

 

什麼是文檔流？佈局

      將窗體自上而下分紅一行行, 並在每行中按從左至右的順序排放元素,即爲文檔流。post

      只有三種狀況會使得元素脫離文檔流，分別是：浮動、絕對定位和相對定位。測試

 

靜態定位(static) ：spa

      static，無特殊定位，它是html元素默認的定位方式，即咱們不設定元素的position屬性時默認的position值就是static，它遵循正常的文檔流對象，對象佔用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。.net

 

相對定位(relative) ：xml

      relative定位，又稱爲相對定位，從字面上來解析，咱們就能夠看出該屬性的主要特性：相對。可是它相對的又是相對於什麼地方而言的呢？這個是個重點，也是最讓我迷糊的一個地方，如今讓咱們來作個測試，我想你們都會明白的：htm

(1) 初始未定位對象

[html]  view plain  copy
 
  1. /******初始*********/  
  2. <style type="text/css">  
  3.     #first { width: 200px; height: 100px; border: 1px solid red; }  
  4.     #second{ width: 200px; height: 100px; border: 1px solid blue;}  
  5. </style>  
  6. <body>  
  7.    <div id="first"> first</div>  
  8.    <div id="second">second</div>  
  9. </body>  

 初始原圖：

 

(2) 咱們修改first元素的position屬性：

 

[html]  view plain  copy
 
  1. <style type="text/css">  
  2.     #first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/  
  3.     #second{width: 200px; height: 100px; border: 1px solid blue;}  
  4. </style>  

  相對偏移20px後：

 

 -- >> 虛線是初始的位置空間

      如今看明白了吧，相對定位相對的是它本來在文檔流中的位置而進行的偏移，而咱們也知道relative定位也是遵循正常的文檔流，它沒有脫離文檔流，可是它的top/left/right/bottom屬性是生效的，能夠說它是static到absoult的一箇中間過渡屬性，最重要的是它還佔有文檔空間，並且佔據的文檔空間不會隨 top / right / left / bottom 等屬性的偏移而發生變更，也就是說它後面的元素是依據虛線位置( top / left / right / bottom 等屬性生效以前)進行的定位，這點必定要理解。

     那好，咱們知道了top / right / left / bottom 屬性是不會對relative定位的元素所佔據的文檔空間產生偏移，那麼margin / padding會讓該文檔空間產生偏移嗎？答案是確定的，咱們一塊兒來作個試驗吧：

(3)   添加margin屬性：

 

[html]  view plain  copy
 
  1. <style type="text/css">  
  2.     #first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/  
  3.     #second{width: 200px;height:100px;border: 1px solid blue;}  
  4. </style>  

  設置margin：20px後：

 

     對比一下，是否是就很清晰了，咱們先將first元素外邊距設爲20px，那麼second元素就得向下偏移40px，因此margin是佔據文檔空間！同理，你們能夠本身動手測下padding的效果吧！

 

絕對定位(absoulte) ：

       absoulte定位，也稱爲絕對定位，雖然它的名字號曰「絕對」，可是它的功能卻更接近於"相對"一詞，爲何這麼講呢？原來，使用absoult定位的元素脫離文檔流後，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的， 舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，必定要是直系祖先纔算哦~），直到<html>標籤爲止，這裏還須要注意的是，relative和static方式在最外層時是以<body>標籤爲定位原點的，而absoulte方式在無父級是position非static定位時是以<html>做爲原點定位。<html>和<body>元素相差9px左右。咱們來看下效果：

(4) 添加absoulte屬性：

 

[html]  view plain  copy
 
  1. <html>  
  2. <style type="text/css">  
  3.     html{border:1px dashed green;}  
  4.     body{border:1px dashed  purple;}  
  5.     #first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}  
  6.     #second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}  
  7. </style>  
  8. <body>  
  9.   <div id="first">relative</div>  
  10.   <div id="second">absoult</div>  
  11. </body>  
  12. </html>  

效果圖：

 

        哈哈，看了上面的代碼後，細心的朋友確定要問了，爲何absoulte定位要加 top:0; left:0; 屬性，這不是畫蛇添足呢？

       其實加上這兩個屬性是徹底必要的，由於咱們若是使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少一個，不然left/right/top/bottom屬性會使用它們的默認值 auto ，這將致使對象聽從正常的HTML佈局規則，在前一個對象以後當即被呈遞，簡單講就是都變成relative，會佔用文檔空間，這點很是重要，不少人使用absolute定位後發現沒有脫離文檔流就是這個緣由，這裏要特別注意~~~

 

少了left/right/top/bottom屬性不行，那若是咱們多設了呢？例如，咱們同時設置了top和bottom的屬性值，那元素又該往哪偏移好呢？記住下面的規則：

  • 若是top和bottom一同存在的話，那麼只有top生效。
  • 若是left和right一同存在的話，那麼只有left生效。

既然absoulte是根據祖先類中的position非static元素進行定位的，那麼祖先類中的margin/padding會不會對position產生影響呢？看個例子先：

(5) 在absoulte定位中添加margin / padding屬性：

[html]  view plain  copy
 
  1. #first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}  
  2. #second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}  
  3.      
  4. <div id="first">first  
  5.     <div id="second">second</div>  
  6. </div>  

效果圖：

 

             看懂了，祖先類的margin會讓子類的absoulte跟着偏移，而padding卻不會讓子類的absoulte發生偏移。總結一下，就是absoulte是根據祖先類的border進行的定位。

Note : 絕對(absolute)定位對象在可視區域以外會致使滾動條出現。而放置相對(relative)定位對象在可視區域以外，滾動條不會出現。

 

固定定位(fixed)：

       fixed定位，又稱爲固定定位，它和absoult定位同樣，都脫離了文檔流，而且可以根據top、right、left、bottom屬性進行定位，但不一樣的是fixed是根據窗口爲原點進行偏移定位的，也就是說它不會根據滾動條的滾動而進行偏移。

 

z-index屬性：

       z-index，又稱爲對象的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，固然這是指同級元素間的堆疊，若是兩個對象的此屬性具備一樣的值，那麼將依據它們在HTML文檔中流的順序層疊，寫在後面的將會覆蓋前面的。須要注意的是，父子關係是沒法用z-index來設定上下關係的，必定是子級在上父級在下。

Note：使用static 定位或無position定位的元素z-index屬性是無效的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程