首頁  >  文章  >  web前端  >  CSS定位實例講解

CSS定位實例講解

小云云
小云云原創
2018-02-02 10:46:391425瀏覽

本文主要跟大家介紹CSS定位的教學,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

1.文檔流程

簡單來說就是元素依照其在 HTML 中的位置順序決定排布的過程。 HTML的版面機制就是用文件流程模型的,也就是區塊元素(block)獨佔一行,內嵌元素(inline)不獨佔一行。

一般使用margin是用來隔開元素與元素的間距;padding是用來隔開元素與內容的間隔。 margin用於佈局分開元素使元素與元素互不相干;padding用於元素與內容之間的間隔,讓內容(文字)與(包裹)元素之間有一段「距離」。只要不是float和絕對定位方式佈局的,都在文檔流程裡面。

2.position屬性介紹

  1. static,預設值。位置設定為static的元素,它總是會處於文件流給予的位置。

  2. inherit,規定應該從父元素繼承 position屬性的值。但是任何的版本的 Internet Explorer (包括 IE8)都不支援屬性值 “inherit”。

  3. fixed,產生絕對定位的元素。預設情況下,可定位於相對於瀏覽器視窗的指定座標。

  4. 元素的位置透過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。不論窗口滾動與否,元素都會留在那個位置。但當祖先元素具有transform屬性且不為none時,就會相對於祖先元素指定座標,而不是瀏覽器視窗。

  5. absolute,產生絕對定位的元素,相對於距離該元素最近的已定位的祖先元素進行定位。

  6. 此元素的位置可透過 “left”、”top”、”right” 以及 “bottom” 屬性來規定。

  7. relative,產生相對定位的元素,相對於該元素在文件中的初始位置進行定位。

  8. 透過 “left”、”top”、”right” 以及 “bottom” 屬性來設定此元素相對於自身位置的偏移。

3.相對定位

relative產生相對定位的元素,相對於其正常位置進行定位。

相對定位完成的過程如下:

以預設方式(static)產生一個元素(並且元素像層一樣浮動了起來)。相對於先前的位置移動,移動的方向和幅度由 left、right、top、bottom 屬性決定,偏移前的位置保留不動。


  <style type="text/css">     
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
  </style>
  <p id="box1"></p>
  <p id="box2"></p>

其中box2中的註解程式碼未生效前,是依照文件流程進行排序呈現。

但是,當註解程式碼取消註解生效後,就會相對文件流程中應呈現的位置進行移動。

所以,相對定位的參考物就是它本身。

4.絕對定位

絕對定位與相對定位的一大不同之處就是,當我們把一個元素設定成絕對定位,那麼這個元素將會脫離文檔流,其他元素就會認為這個元素不存在於文檔流中而填入它原來的位置。絕對定位元素根據它的參考物移動自己的位置,而參照物則需要根據它祖先元素的定位設定來決定。

所謂根據它祖先元素的定位設定來確定簡單理解為:相對於該元素最近的已定位的祖先元素,如果沒有一個祖先元素設定定位,那麼參照物就是body層。

  1. 在祖先元素沒定位的情況下,使用absolute。在這種情況下,參考物就是body。

  2. 祖先元素有定位,祖先元素只要設定了值不為position:static以外的值,都視為有定位,並且最近的祖先元素會被設定為絕對定位元素的參照物。在這種情況下,參考物就是最近的祖先元素。

  3. 在沒有設定left/right、top/bottom的情況下,absolute元素的位置就是該元素在文件流裡的位置

相關推薦:

CSS定位中Positoin、absolute、Relative的一些研究

CSS定位position及應用場景實例分析

關於CSS定位的10篇課程推薦

#

以上是CSS定位實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn