IT工程師數位筆記本

    Positioning(定位)

         定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素后面，并指定一個元素的內容太大時，應該發生什么。

   元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作

   方式，這取決于定位方法.

    四種定位方式

• Static 定位

         HTML元素的默認值，即沒有定位，元素出現在正常的流中。靜態定位的元素不會受到top, bottom, left, right影響。

• Fixed（固定） 定位

              固定定位相對于瀏覽器可視窗口進行定位。固定定位后自動變成行塊元素;固定定位元素可以成為其后代絕對定位元素的

              定位參照物;固定定位的元素的位置不受瀏覽器滾動條的影響。
     

• Relative（相對） 定位

              a. 相對定位的參照物是元素沒有發生定位前本應該出現的位置。

              b.元素相對定位后其原來位置仍要保留，其它元素不得占用。

             使用情況

                    1.元素想偏移。

                    2.元素要做為其絕對定位后代元素的參照物時。

• Absolute（絕對定位） 定位

               a.元素絕對定位后自動變成行塊元素。

               b.絕對定位元素的父元素，計算寬高時將忽略絕對定位的子元素。

               c.絕對定位的元素往往要配合使用left /right/top/bottom進行位置設定。

               d.絕對定位的參照物是:離他最近的且設置了position值為relative/fixed/absolute之一的先祖元素，

                  如果沒有這樣的先祖元素 為參照物，那么參照物就是html。

               e.絕對定位的元素，高度寬度如果設為百分比，那么這個百分比是相對于其定位參照物的高度寬度，而非

                  其父元素.

               f.元素絕對定位后，設置left/right/top/bottom如果為百分比那么百分比是相對于其參照物的寬高來

                 計算的，而非自身的寬度。

               g.絕對定位的元素，會遮擋處于其后面的標準流元素的內容.

               h.可以通過z-index屬性來控制定位元素與浮動元素在z軸方向上的疊加順序, 但不能控制標準文檔流元素.