CSS中的Position屬性

來源:互聯網
上載者:User

也許你看到這個標題覺得很簡單,確實這是一篇關於CSS中Position屬性基礎知識的文章,但是關於Position的一些細節也許你不瞭解。

1、簡介
 position有五個屬性: static | relative | absolute | fixed | inherit
 static 和 inherit : 沒什麼值得介紹的。
 relative : 相對於元素自身的定位。
 absolute :相對於包含塊的定位。
 fixed : 相對於視窗的定位。

2、包含塊

包含塊就是 top | right | bottom | left 參考的元素。
absolute的包含塊指的是:該元素最近的具有定位設定的父元素,即最近的position屬性值不為static的祖先元素舉個例子:

 

<body>
<div id="outer" style="position:absolute">
<div id="inner">
<span style="position:absolute">span</span>
</div>
</div>
</body>

對於span元素來講,它的包含塊是#outer,而不是#inner,因為#outer設定了 position:absolute。值得注意的是,只要#outer設定了 absolute | relative | fixed span元素的“定位父元素”就是#outer,如果outer沒有設定三種屬性的其中之一,則span的包含塊就是html元素。

relative的包含塊指的是:元素自身。

3、top | right | bottom | left 的細節。
也許你會想當然的認為這些值有什麼細節可言,那你就錯了。在此以left為例:
left值 = “定位父元素”border內邊 到 該元素margin外邊的舉例 ,簡單的記憶就是“border內,margin外”。

right | bottom | left 也是這種道理

4、z-index
關於z-index的細節,這裡就不說了,因為覺得自己表達不清,而且《CSS權威指南》相應章節裡對z-index講的非常清楚(特別是疊放內容相關的相關知識),這些知識是非常有用的。
如果你能看懂下面這個層疊順序,則證明你對z-index的學習已經非常成熟了。要注意其中#one1 元素 #two元素的層疊順序。

例子:http://www.kangchangan.cn/cnblog/zIndexStackingContext.html

 

5、postion 與文檔流
只要元素設定了 postion : absolute | relative | fixed , 該元素就會脫離文檔流。
但是relative元素是個特例,因為該元素對然脫離了文檔流,但是它原本所佔的空間仍然佔據文檔流。

例如:

 

代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>relative</title>
<style type="text/css">
* { margin:0; padding:0;}
body { padding:50px; background-color:#FFFFCC;}
span{
position:relative;
left:50px;
top:40px;
background-color:#FF9900;
}
</style>
</head>

<body>
<p> rain-man rain-man rain-man rain-man rain-man <br />
rain-man rain-man <span>cnblog</span> rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br /></p>
</body>
</html>

6、positon 與 display
元素分為內嵌元素和區塊元素兩類(當然也有其它的),在內嵌元素中有個非常重要的常識,即內兩元素是不可以設定區塊元素所具有的樣式,例如:width | height。
relative : 原來是什麼類型的依舊是什麼類型。
absolute | fixed : 元素就被重設為了區塊元素,例如:打算為span元素指定大小,並絕對位置
     <span style="position:absolute; width:100px; height:50px;">span</span>這是完全正確的,
     <span style="position:absolute; display:block; width:100px; height:100px;">span</span>,這裡的display:block就是多餘的了。

7、position 與 float
一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這是一個常識性的知識點,因為這是兩個不同的流,一個是浮動流,另一個是“定位流(這是自己起的名字,呵呵)”。
但是 relative 卻可以。因為它原本所佔的空間仍然佔據文檔流。

8、Bug

Bug1:

 參考網頁: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html,哎這個就是IE的bug了,解決辦法就是為#container設定 z-index:11 || 大於10的整數。

Bug2:

bug頁面:http://www.kangchangan.cn/cnblog/floatPosition.html

解決頁面:http://www.kangchangan.cn/cnblog/floatPosition2.html

 相關解釋已經在解決頁面了。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.