屬性：position（定位）
上圖是官方的介紹，在實際使用的時候可以通過提示看到還有許多的值可選，例如：-ms-page、-ms-device-fixed、-webkit-sticky、initial、sticky、unset等。
1、fixed(英譯：固定的)：在官方的介紹中其位置是相對於瀏覽器視窗來定位的。注意的是當你在元素中使用了該值來定位，它的位置使用left、top、right、bottom來改變元素的位置，如果你使用margin的話，它是相對於上乙個元素的。
在同時幾個元素都使用fixed時，會造成覆蓋如圖所示，這時就需要使用到z-index這個屬性，在新增該屬性後如第二張圖所示效果。該值最大則顯示在最外層。
2、absolute：絕對定位，相對於static（預設值）定位以外的第乙個父元素進行定位。下圖是效果圖，(需要注意：因為position預設值是static，所以要想實現效果需要對父元素設定position除static之外的的值)
3、relative：相對定位，相對於其正常位置進行定位。意思就是相對於其原本的位置進行定位。
（總結：值得注意的是absolute、relative、fixed常用的三個定位值都是使用left、top、right、bottom來定位，而並非是使用margin，padding來調整位置。雖然margin、padding也可以調動位置，但千萬別誤解了
* * *margin和padding：margin是用來調節外邊框距的，也就是元素與元素之間的距離，當全域性沒有乙個定位元素時，第乙個元素以瀏覽器左上角為原點定位，二第二個元素以第乙個為原點定位，以此類推。例如：有兩個p標籤，第乙個margin-top：20，而第二個設定margin-top：-40，在介面上第二個p標籤中的內容在第乙個之前。在這裡還需要注意的是只有塊級元素設定margin-top或者margin-bottom才有效果。
padding是調節元素內部內容到元素內邊框的距離。同樣行級元素的padding-top以及padding-bottom也是沒有效果的。
4、inherit：繼承，從父元素繼承其position屬性。效果圖：（通過兩張圖的比較，以及上面的內容可以看出裡面的3個div繼承了父級元素的position）
5、其他：static（預設值），上面有提到過，就是沒有設定位，按正常來該怎樣就怎樣。
initial（最初的），這個我嘗試過，大概意思就是單詞的意思最初的，也就是原本該怎樣就怎樣。這個也是css的乙個關鍵字。
sticky（英譯是不愉快的、粘性的、不動的等），我嘗試過如圖：在沒有設定為sticky時，top：50px；紅色的div應該被綠色的遮蓋住了，但是當設定了sticky時如圖，並沒有完全遮蓋，實際上只下移了30px,所以這或許就是這個單詞的意思粘性、沒有按實際來造成不愉快吧....
unset（未定式），名如其意，unse
t關鍵字可以理解為不設定。其實，它是關鍵字inherit和initial的組合。意思就是當設定為unset時，如果它有父類可繼承則繼承（inherit），如果沒有可繼承的就是最初的（initial）。
(-ms-page
-ms-device-fixed
-webkit-sticky)最後這幾個也沒弄懂什麼意思，不同工具使用快捷鍵選擇時有些有、有些沒有，這是我看到的幾個，如果有大神了解的話可以解釋一波。
CSS樣式布局 position屬性
position屬性 用於定義建立元素布局所用的定位型別，該屬性有多個值 值 描述 static 預設值。沒有定位，元素出現在正常流中 忽略 top,bottom,left,right 或者 z index 宣告 relative 生成相對定位的標籤，相對於標籤原來位置進行定位。因此，left 20...
css布局樣式屬性 text overflow
當文字過長，需縮略顯示時，使用css屬性 text overflow 即可滿足需求 關鍵字 text overflow ellipsis 語法 text overflow clip ellipsis clip 預設值 不顯示省略標記 而是簡單的裁切.ellipsis 當物件內文字溢位時顯示省略標記 ...
CSS之margin樣式屬性
相對於同級的標籤設定偏移量 doctype html utf 8 title span in style head border 1px solid red height 300px width 300px margin bottom 20px in style background color b...