談談我從事web前端設計對div絕對位置的心得

    我以前的部落格上面的文章需要全部挪到這個部落格裡面，也是在部落格園中叫“盧瑟的web”請大家多多支援，這個以後我會一直使用這個“奧迪”了！

 

    用技術術語來說，絕對位置允許相對於元素的包含塊將元素準確的定位在頁面上的任何位置。或者用通俗的來說，它允許相對於“父”元素（例如：div id="footer"）對“

子”元素（例如 p id="copyright-date"）進行定位。儘管還可以為position屬性定義其他值（static、relative、fixed），現在就只來談談絕對位置。

     我們假設一下，編寫一組div、p和strong元素。每個元素都相對於標記流中他前面的元素進行定位。這就像是俄羅斯方塊遊戲，每個塊必須放在已經存在的相鄰塊的頂部或

旁邊（因為每個元素都有自己的預設位置，前提是你不設定position的時候）。

     正好相反，在使用絕對位置的時候，同樣一組元素，每個元素都定義一個相對於包含塊（父元素）的絕對位置，而不用考慮標記流的情況。子項目可以並排放置，也可以重

疊放置，甚至可以定位到包含塊（父元素）外邊地區的任何地方。定位的固定屬性有top、left、bottom、right、z-index等屬性。怎嗎？不知道什麼是位置屬性？接下來就開始

講：

     在討論位置屬性之前你先要弄清楚position的屬性relative和absolute的區別，relative屬性是相對於，通常用於包含塊（即父元素）上，而absolute通常用於已經運用

了relative屬性的包含塊內的元素。有點繞口，理解就好！

      top、left、bottom、right等都為位置元素，下哦那個它們的中文意思就可以明白大致意思，這些屬性通常使用的單位是px，em，%相對於包含塊（即父元素）計算這些屬

性值的組合。所以，如果子項目的位置是bottom:50px;和left:30px；那麼子項目定位在父元素的底部50像素、距離左邊30像素的地方。另外，可以混合使用不同的單位，比如

bottom:50px和3em。

        好，說了這麼多，我們把這些理論實踐一下，以下為範例程式碼：

 1 h2
 2 {
 3 position:relative;      /*為包含塊（即父元素）定義屬性relative*/
 4 width:100%;             /*為包含塊定義寬度為100%*/
 5  height:100em;           /*將高度定義為100個文字的高度*/
 6  }
 7  
 8  h2 strong
 9 {
10  position:absolute;                              /*為position定於屬性absolute*/
11  top:20px;                                         /*這個顯示距離頂部20像素*/
12 left:10px;                                      /*這個顯示的是距離左邊10像素*/
13 }

 

        這樣的話就初步形成了一個簡單的絕對位置的模型，再複雜的定位也是這個原理。html代碼如下：

1 <h2>
2 <strong>我得意的笑，這裡懸掛在半空中哦</strong>
3 </h2>

 

       看不到你想要的效果，參照我之前寫的“關於css中出現的bug以及修複方法(2)”中的解決方案，設定邊框和背景色，就可以看到效果了！

        （喜歡學習的和想與我探討各種web知識的留下你的郵箱或連絡方式，或者跟我發郵件747850255@qq.com轉載請自覺附上轉載地址，來自部落格園“明年開奧迪”)