標籤：靜態 ott logs 修改 png back body 表單 word
參考源：http://blog.csdn.net/chen_zw/article/details/8741365
我們先來看看CSS3 Api中對position屬性的相關定義：
什麼是文檔流？
將表單自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文檔流。
只有三種情況會使得元素脫離文檔流，分別是：浮動、絕對位置和相對定位。
靜態定位(static) ：
static，無特殊定位，它是html元素預設的定位方式，即我們不設定元素的position屬性時預設的position值就是static，它遵循正常的文檔流對象，對象佔用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。
相對定位(relative) ：
relative定位，又稱為相對定位，從字面上來解析，我們就可以看出該屬性的主要特性：相對。但是它相對的又是相對於什麼地方而言的呢？這個是個重點，也是最讓我迷糊的一個地方，現在讓我們來做個測試，我想大家都會明白的：
(1) 初始沒有定位
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> #first{width:200px;height:100px;border:1px solid red;} #second{width:200px;height:100px;border:1px solid blue;} </style></head><body> <div id="first">first</div> <div id="second">second</div></body></html>
初始原圖：
(2) 我們修改first元素的position屬性：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> #first{width:200px;height:100px;border:1px solid red; position:relative;top:20px;left:20px;} #second{width:200px;height:100px;border:1px solid blue;} </style></head><body> <div id="first">first</div> <div id="second">second</div></body></html>
相對位移20px後，結果如下，虛線是初始的位置：
CSS中position屬性( absolute | relative | static | fixed )詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
