關於position定位的一些理解

定位: 目的-------佈局

步驟:

1. 第一步: 經過position屬性設置定位元素相對於誰進行定位(找個參照物)
2. 第二部: 經過設置left right top bottom 屬性 肯定定位元素距離 參考元素的位置.

優先級:

• left>right
• top>bottom

position 屬性值:

1. relative相對定位,於當前標籤沒有移動以前的位置爲參照進行定位,不會將對應的標籤從父級中脫離出來(不會脫離文檔流)
2. absolute (重點,頻率最高)絕對定位;已定位父元素爲參照進行定位,而且已定位父元素的屬性 值必須爲relative absolute或者fixed,若是父級標籤中都沒有定位,最終標籤會以document爲參照進行定位, 元素設置absolute以後,會從父元素中脫離出來(脫離文檔流),提高層級.
3. fiexd 固定定位: 以瀏覽器窗口爲參照物進行定位,也會讓當前元素從文檔流中脫離出來(脫離文檔流)
4. static(默認值)靜態定位,無參照物,不會進行定位

------------------------------------------------------------------------------------------>

絕對定位: 

• 相對於已定位父元素進行定位,而且父元素position屬性值爲relative absolute fixed

若是沒有已定位父級 會相對於 document 進行定位.

特徵: 

第一 脫離文檔流 (父級不在保留元素原來的位置 )

第二 提高層級

第三 結合相對定位使用(給父元素設置position:relative)

第四 若是給塊元素設置相對定位,寬高默認有內容撐開 不在獨佔一行,margin 的左右auto失效

第五 行元素設置絕對定位後,行元素會支持寬高的設置,支持上下的padding border margin

後定位的元素會蓋先定位的元素

-->

固定定位: 

•  相對於瀏覽器窗口進行定位

特徵:

1, 固定以後,元素脫離文檔流(父級不會保留該元素的高度)

2, 提高層級

3, 父元素設置固定定位,不用清除子元素浮動所產生的影響

4 , IE6不兼容

5, 若是給塊元素設置固定對定位,寬高默認有內容撐開 不在獨佔一行,margin 的左右auto失效

6, 行元素設置固定定位後,行元素會支持寬高的設置,支持上下的padding border margin

後定位的元素會蓋先定位的元素

<div class="fatDiv">   
  <div class="sonDiv"></div>
</div>
<p>sdafasasdsa</p>
<style type="text/css">   
.fatDiv{      
   width: 300px;     
   height: 300px;      
   background-color: red;      
   margin: 0 auto;      
   /*第一步:設置position屬性*/      
   position: relative;      
   /*第二步:肯定位置*/      
   /*left: 200px;*/      
   /*top: -50px;*/    
}    
.sonDiv{      
    width: 200px;     
    height: 200px;      
    background-color: yellow;      
    position: absolute;      
    /*margin: 0 auto;*/      
    left: 50px;      
    right: 100px;      
    /*top: 50px;*/    
}
</style>複製代碼

層級

z-index: 用來調整定位元素的層級值越大,元素顯示越靠前,該屬性的默認值爲0,當元素的z-index 相同時,遵循後來居上的原則(後定位的元素會蓋住先定位的元素)。

設置透明度的第一種方式:設置opacity 屬性，屬性的取值範圍: 0~1

IE 6 不識別opacity屬性,是經過 filter屬性來設置透明度的

語法結構:

filter:alpha(opacity=50);

取值範圍 0~100;

/*第二種設置透明度的方式*/

background-color: rgba(0,0,0,0.5);

努力作好每一件事，會不按期更新本身所學所得所知。