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