大家好，我是IT共享者，人稱皮皮。這篇我們來講講CSS定位。

創(chuàng)新互聯(lián)公司服務(wù)緊隨時(shí)代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過10年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計(jì)師、專業(yè)的網(wǎng)站實(shí)施團(tuán)隊(duì)以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對(duì)網(wǎng)站進(jìn)行網(wǎng)站制作、成都做網(wǎng)站、建設(shè)、維護(hù)、更新和改版，實(shí)現(xiàn)客戶網(wǎng)站對(duì)外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

一、Position(定位)

CSS定位屬性允許你為一個(gè)元素定位。它也可以將一個(gè)元素放在另一個(gè)元素后面，并指定一個(gè)元素的內(nèi)容太大時(shí)，應(yīng)該發(fā)生什么。

元素可以使用的頂部，底部，左側(cè)和右側(cè)屬性定位。然而，這些屬性無法工作，除非是先設(shè)定position屬性。他們也有不同的工作方式，這取決于定位方法。

二、屬性

1. Static 定位(默認(rèn)效果)

HTML元素的默認(rèn)值，即沒有定位，元素出現(xiàn)在正常的流中。

靜態(tài)定位的元素不會(huì)受到top, bottom, left, right影響。

2. Fixed 定位

元素的位置相對(duì)于瀏覽器窗口是固定位置。

即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
         
  
  
  
  
         
  
  
  
  
     
  
  
  
  
         
  
  
  
  
     
  
  
  
  
 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
        Some more text
 
  
  
  
  
        
Note: 代碼使人進(jìn)步?。。?
 
  
  
  
  
        
Some text
 
  
  
  
  
        
Some text
 
  
  
  
  
        
Some text
 
  
  
  
  
        
Some text
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
 
 
 
 
 

注意：

Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。

Fixed定位的元素和其他元素重疊。

3. Relative 定位

相對(duì)定位元素的定位是相對(duì)其正常位置。

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
 
  
  
  
  
     
  
  
  
  
         
  
  
  
  
     
  
  
  
  
 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
        
Some more text
 
  
  
  
  
        
Note: 代碼使人進(jìn)步?。?！.
 
  
  
  
  
        This heading is moved left according to its normal position 
  
  
  
  
        This heading is moved right according to its normal position 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
 
 
 
 
 

可以移動(dòng)的相對(duì)定位元素的內(nèi)容和相互重疊的元素，它原本所占的空間不會(huì)改變。

 
 
 
 

  
  
  
  
h2.pos_top{ 
  
  
  
  
    position:relative; 
  
  
  
  
    top:-50px; 
  
  
  
  
} 
 
 
 
 

相對(duì)定位元素經(jīng)常被用來作為絕對(duì)定位元素的容器塊。

4. Absolute 定位

絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對(duì)于:

 
 
 
 

  
  
  
  
h2{ 
  
  
  
  
    position:absolute; 
  
  
  
  
    left:100px; 
  
  
  
  
    top:150px; 
  
  
  
  
} 
 
 
 
 

Absolutely定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。

Absolutely定位的元素和其他元素重疊。

三、重疊的元素

元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了一個(gè)元素的堆疊順序(哪個(gè)元素應(yīng)該放在前面，或后面)

一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序：

 
 
 
 

  
  
  
  
img{ 
  
  
  
  
    position:absolute; 
  
  
  
  
    left:0px; 
  
  
  
  
    top:0px; 
  
  
  
  
    z-index:-1; 
  
  
  
  
} 
 
 
 
 

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

注意： 如果兩個(gè)定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。

四、總結(jié)

本文基于Html基礎(chǔ)，主要介紹了CSS中四種定位的方式。對(duì)于四種的定位表現(xiàn)形式，用豐富的案例 ，代碼效果圖的展示，幫助大家更好理解 。

最后，希望可以幫助大家更好的學(xué)習(xí)CSS3。

本文名稱：一篇文章帶你了解CSS定位知識(shí)
文章出自：http://uogjgqi.cn/article/cccscde.html