html中Position屬性值介紹和position屬性四種用法

佚名發表於2018-12-03
文章主要介紹了html中 position用法,文中逐一給大家介紹了position的四個屬性值,感興趣的朋友跟隨小編一起看看吧

position的四個屬性值:

1.relative
2.absolute
3.fixed
4.static

下面分別講述這四個屬性。

  1. <div id="parent">
  2.      <div id="sub1">sub1</div>
  3.      <div id="sub2">sub2</div>
  4. </div>

1. relative

relative屬性相對比較簡單,我們要搞清它是相對哪個物件來進行偏移的。答案是它本身的位置。在上面的程式碼中,sub1和sub2是同級關係,如果設定sub1一個relative屬性,比如設定如下CSS程式碼:

  1. #sub1
  2. {
  3.     position: relative;
  4.     padding: 5px;
  5.     top: 5px;
  6.     left: 5px;
  7. }

我們可以這樣理解,如果不設定relative屬性,sub1的位置按照正常的文件流,它應該處於某個位置。但當設定sub1為的position為relative後,將根據top,right,bottom,left的值按照它理應所在的位置進行偏移,relative的“相對的”意思也正體現於此。

對於此,您只需要記住,sub1如果不設定relative時它應該在哪裡,一旦設定後就按照它理應在的位置進行偏移。

隨後的問題是,sub2的位置又在哪裡呢?答案是它原來在哪裡,現在就在哪裡,它的位置不會因為sub1增加了position的屬性而發生改變。

如果此時把sub2的position也設定為relative,會發生什麼現象?此時依然和sub1一樣,按照它原來應有的位置進行偏移。

注意relative的偏移是基於物件的margin的左上側的。

2. absolute

這個屬性總是有人給出誤導。說當position屬性設為absolute後,總是按照瀏覽器視窗來進行定位的,這其實是錯誤的。實際上,這是fixed屬性的特點。

當sub1的position設定為absolute後,其到底以誰為物件進行偏移呢?這裡分為兩種情況:

(1)當sub1的父物件(或曾祖父,只要是父級物件)parent也設定了position屬性,且position的屬性值為absolute或者relative時,也就是說,不是預設值的情況,此時sub1按照這個parent來進行定位。

注意,物件雖然確定好了,但有些細節需要您的注意,那就是我們到底以parent的哪個定位點來進行定位呢?如果parent設定了margin,border,padding等屬性,那麼這個定位點將忽略padding,將會從padding開始的地方(即只從padding的左上角開始)進行定位,也就是忽略padding,當然並不會忽略margin和border。

接下來的問題是,sub2的位置到哪裡去了呢?由於當position設定為absolute後,會導致sub1溢位正常的文件流,就像它不屬於 parent一樣,它漂浮了起來,在DreamWeaver中把它稱為“層”,其實意思是一樣的。此時sub2將獲得sub1的位置,它的文件流不再基於 sub1,而是直接從parent開始。

(2)如果sub1不存在一個有著position屬性的父物件,那麼那就會以body為定位物件,按照瀏覽器的視窗進行定位,這個比較容易理解。

3. fixed

fixed是特殊的absolute,即fixed總是以body為定位物件的,按照瀏覽器的視窗進行定位,即使拖動捲軸,他的位置也是不會改變的。與background-attachment:fixed相似

當然在Dreamweaver下似乎沒有支援

4. static

position的預設值,一般不設定position屬性時,會按照正常的文件流進行排列。

總結

以上所述是小編給大家介紹的html中 position用法  ,希望對大家有所幫助。

相關文章