老Web前端設(shè)計者談對div絕對定位的心得
用技術(shù)術(shù)語來說，絕對定位允許相對于元素的包含塊將元素準確的定位在頁面上的任何位置。或者用通俗的來說，它允許相對于“父”元素（例如：div id="footer"）對“子”元素（例如 p id="copyright-date"）進行定位。盡管還可以為position屬性定義其他值（static、relative、fixed），現(xiàn)在就只來談?wù)劷^對定位。
我們假設(shè)一下，編寫一組div、p和strong元素。每個元素都相對于標記流中他前面的元素進行定位。這就像是俄羅斯方塊游戲，每個塊必須放在已經(jīng)存在的相鄰塊的頂部或旁邊（因為每個元素都有自己的默認位置，前提是你不設(shè)置position的時候）。
正好相反，在使用絕對定位的時候，同樣一組元素，每個元素都定義一個相對于包含塊（父元素）的絕對定位，而不用考慮標記流的情況。子元素可以并排放置，也可以重疊放置，甚至可以定位到包含塊（父元素）外邊區(qū)域的任何地方。定位的固定屬性有top、left、bottom、right、z-index等屬性。怎么？不知道什么是位置屬性？接下來就開始講：
在討論位置屬性之前你先要弄清楚position的屬性relative和absolute的區(qū)別，relative屬性是相對于，通常用于包含塊（即父元素）上，而absolute通常用于已經(jīng)運用了relative屬性的包含塊內(nèi)的元素。有點繞口，理解就好！
top、left、bottom、right等都為位置元素，下哦那個它們的中文意思就可以明白大致意思，這些屬性通常使用的單位是px，em，%相對于包含塊（即父元素）計算這些屬性值的組合。所以，如果子元素的位置是bottom:50px;和left:30px；那么子元素定位在父元素的底部50像素、距離左邊30像素的地方。另外，可以混合使用不同的單位，比如bottom:50px和3em。
好，說了這么多，我們把這些理論實踐一下，以下為示例代碼：
- h2
- {
- position:relative; /*為包含塊（即父元素）定義屬性relative*/
- width:100%; /*為包含塊定義寬度為100%*/
- height:100em; /*將高度定義為100個文字的高度*/
- }
- h2 strong
- {
- position:absolute; /*為position定于屬性absolute*/
- top:20; /*這個顯示距離頂部20像素*/
- left:10px; /*這個顯示的是距離左邊10像素*/
- }
這樣的話就初步形成了一個簡單的絕對定位的模型，再復雜的定位也是這個原理。html代碼如下：
- <h2>
- <strong>我得意的笑，這里懸掛在半空中哦</strong>
- </h2>
看不到你想要的效果，設(shè)置邊框和背景色，就可以看到效果了！
原文鏈接：http://www.cnblogs.com/jiacy/archive/2011/05/24/2055950.html
