CSS必知|重點屬性position|實踐技巧|溫故知新

學海無涯，不要沉浸在知識的海洋裏，迷失本身。css

要知道本身想要什麼，抓住重點，不忘初心。html

這個世界上百分之20的人，掌握着百分之80的財富。面試

接下來一系列教程，就帶領你們抓住重點，一塊兒作那百分之20的人。markdown

往期知識點回顧：oop

重點屬性display佈局

重點屬性floatpost

1、重點屬性Position

爲了製做更多複雜的佈局，咱們須要討論下 position 屬性。它有一大堆的值，名字還都挺抽象的，接下來讓咱們挨個學習一下。學習

static

static 是默認值。任意 position: static; 的元素不會被特殊的定位。一個 static 元素表示它不會被「positioned」，一個 position 屬性被設置爲其餘值的元素表示它會被「positioned」。spa

.static {
    position: static;
}
複製代碼

relative

relative 表現的和 static 同樣，除非你添加了一些額外的屬性。code

在一個相對定位（position屬性的值爲relative）的元素上設置 top 、 right 、 bottom 和 left 屬性會使其偏離其正常位置。其餘的元素的位置則不會受該元素的影響發生位置改變來彌補它偏離後剩下的空隙。

.relative1 {
     position: relative;
}
.relative2 {
     position: relative;
     top: -20px;
     left: 20px;
     background-color: white;
     width: 500px;
}
複製代碼

fixed

一個固定定位（position屬性的值爲fixed）元素會相對於視窗來定位，這意味着即使頁面滾動，它仍是會停留在相同的位置。和 relative 同樣， top 、 right 、 bottom 和 left 屬性均可用。

.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    background-color: white;
}
複製代碼

absolute

absolute 是最棘手的position值。 absolute 與 fixed 的表現相似，可是它不是相對於視窗而是相對於最近的「positioned」祖先元素。若是絕對定位（position屬性的值爲absolute）的元素沒有「positioned」祖先元素，那麼它是相對於文檔的 body 元素，而且它會隨着頁面滾動而移動。記住一個「positioned」元素是指 position 值不是 static 的元素。

絕對定位使用一般是父級定義position:relative定位，子級定義position:absolute絕對定位屬性，而且子級使用left或right和top或bottom進行絕對定位。

.relative {
    position: relative;
    width: 600px;
    height: 400px;
}
.absolute {
    position: absolute;
    top: 120px;
    right: 0;
    width: 300px;
    height: 200px;
}
複製代碼

inherit

inherit 值如同其餘 css 屬性的 inherit 值，即繼承父元素的 position 值。

須要敲代碼練習的地方：

<!DOCTYPE html>
<html>    
<head>     
   <title>postion元素</title>   
   <style>       
     .container {          
      position: relative;      
          border: 1px red solid      
      }          
     .nav {          
           position: absolute;     
           left: 0px;         
            width: 200px;         
            border: 1px blue solid    
        }         
     .section {       
         /* position is static by default */       
         margin-left: 200px;         
         border: 1px green solid      
      }            
     .footer {      
          position: fixed;       
          bottom: 0;          
          left: 0;          
          height: 70px;       
          background-color: white;    
           width: 100%;         
           border: 1px yellow solid    
        }         
      body {       
         margin-bottom: 120px;    
      }     
  </style>   
 </head>  
  <body>    
     <div class="container">     
       <div class="nav">         
         <li>.absolute</li>       
         <li>.absolute</li>       
         <li>.absolute</li>     
       </div>           
       <div class="section">    
                我是static  
       </div>        
       <div class="section">   
                 我是static    
        </div>        
        <div class="section">   
                 我是static    
        </div>        
        <div class="section">    
                我是static    
        </div>         
        <div class="footer">    
            我是 fixed       
        </div>            
  </div>  
  </body>
</html>
複製代碼

面試題:

1.使用什麼position元素會脫離文檔流，並解釋"脫離文檔流"的含義。

使用fixed和absolute會脫離文檔流。

脫離文檔流,指的是元素脫離正常元素的佈局排版規則,其餘處於文檔流中的盒子在計算佈局排版時,會自動無視已脫離文檔流的元素來進行定位。

2.浮動(float)與絕對定位(position:absolute/fixed)之間的區別

(1)浮動會使元素脫離文檔流,可是不會脫離文本流,在於其餘盒子的文本內容計算佈局的時候,仍是佔位置的。

(2)絕對定位會使元素脫離文檔流,同時也會脫離文本流, 在於其餘盒子的文本內容計算佈局的時候,不佔位置。

參考文獻：

developer.mozilla.org/zh-CN/docs/…