欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css中position屬性(absolute|relative|static|fixed)概述及應(yīng)用

  發(fā)布時(shí)間：2013-04-08 11:52:17   作者：佚名   我要評(píng)論
position屬性的相關(guān)定義：static：無特殊定位，對(duì)象遵循正常文檔流;relative：對(duì)象遵循正常文檔流;absolute：對(duì)象脫離正常文檔流fixed：對(duì)象脫離正常文檔流，有興趣的朋友可以參考下哈

我們先來看看CSS3 Api中對(duì)position屬性的相關(guān)定義：

  • static：無特殊定位，對(duì)象遵循正常文檔流。top，right，bottom，left等屬性不會(huì)被應(yīng)用。
  •  relative：對(duì)象遵循正常文檔流，但將依據(jù)top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
  •  absolute：對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位。而其層疊通過z-index屬性定義。
  •  fixed：對(duì)象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。而其層疊通過z-index屬性定義。

怎么樣，是不是還是很迷糊~~ 沒關(guān)系，下面就從幾個(gè)基礎(chǔ)概念一一給大家詳述：

什么是文檔流？

      將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。

      只有三種情況會(huì)使得元素脫離文檔流，分別是：浮動(dòng)、絕對(duì)定位和相對(duì)定位。

靜態(tài)定位(static) ：

      static，無特殊定位，它是html元素默認(rèn)的定位方式，即我們不設(shè)定元素的position屬性時(shí)默認(rèn)的position值就是static，它遵循正常的文檔流對(duì)象，對(duì)象占用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。

相對(duì)定位(relative) ：

      relative定位，又稱為相對(duì)定位，從字面上來解析，我們就可以看出該屬性的主要特性：相對(duì)。但是它相對(duì)的又是相對(duì)于什么地方而言的呢？這個(gè)是個(gè)重點(diǎn)，也是最讓我迷糊的一個(gè)地方，現(xiàn)在讓我們來做個(gè)測(cè)試，我想大家都會(huì)明白的：

(1) 初始未定位

復(fù)制代碼
代碼如下:

/******初始*********/
<style type="text/css">
#first { width: 200px; height: 100px; border: 1px solid red; }
#second{ width: 200px; height: 100px; border: 1px solid blue;}
</style>
<body>
<div id="first"> first</div>
<div id="second">second</div>
</body>

初始原圖：

(2) 我們修改first元素的position屬性：

復(fù)制代碼
代碼如下:

<style type="text/css">
#first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/
#second{width: 200px; height: 100px; border: 1px solid blue;}
</style>

偏移20px后：


-- >> 虛線是初始的位置空間

      現(xiàn)在看明白了吧，相對(duì)定位相對(duì)的是它原本在文檔流中的位置而進(jìn)行的偏移，而我們也知道relative定位也是遵循正常的文檔流，它沒有脫離文檔流，但是它的top/left/right/bottom屬性是生效的，可以說它是static到absoult的一個(gè)中間過渡屬性，最重要的是它還占有文檔空間，而且占據(jù)的文檔空間不會(huì)隨 top / right / left / bottom 等屬性的偏移而發(fā)生變動(dòng)，也就是說它后面的元素是依據(jù)虛線位置( top / left / right / bottom 等屬性生效之前)進(jìn)行的定位，這點(diǎn)一定要理解。

     那好，我們知道了top / right / left / bottom 屬性是不會(huì)對(duì)relative定位的元素所占據(jù)的文檔空間產(chǎn)生偏移，那么margin / padding會(huì)讓該文檔空間產(chǎn)生偏移嗎？答案是肯定的，我們一起來做個(gè)試驗(yàn)吧：

(3)   添加margin屬性：

復(fù)制代碼
代碼如下:

<style type="text/css">
#first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/
#second{width: 200px;height:100px;border: 1px solid blue;}
</style>

設(shè)置margin：20px后：

 

對(duì)比一下，是不是就很清晰了，我們先將first元素外邊距設(shè)為20px，那么second元素就得向下偏移40px，所以margin是占據(jù)文檔空間！同理，大家可以自己動(dòng)手測(cè)下padding的效果吧！

絕對(duì)定位(absoulte) ：

       absoulte定位，也稱為絕對(duì)定位，雖然它的名字號(hào)曰“絕對(duì)”，但是它的功能卻更接近于"相對(duì)"一詞，為什么這么講呢？原來，使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進(jìn)行定位，而這個(gè)祖先類還必須是以postion非static方式定位的， 舉個(gè)例子，a元素使用absoulte定位，它會(huì)從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算哦~），直到<html>標(biāo)簽為止，這里還需要注意的是，relative和static方式在最外層時(shí)是以<body>標(biāo)簽為定位原點(diǎn)的，而absoulte方式在無父級(jí)是position非static定位時(shí)是以<html>作為原點(diǎn)定位。<html>和<body>元素相差9px左右。我們來看下效果：

(4) 添加absoulte屬性：

復(fù)制代碼
代碼如下:

<html>
<style type="text/css">
html{border:1px dashed green;}
body{border:1px dashed purple;}
#first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
#second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
</style>
<body>
<div id="first">relative</div>
<div id="second">absoult</div>
</body>
</html>

效果圖：

        哈哈，看了上面的代碼后，細(xì)心的朋友肯定要問了，為什么absoulte定位要加 top:0; left:0; 屬性，這不是多此一舉呢？

       其實(shí)加上這兩個(gè)屬性是完全必要的，因?yàn)槲覀內(nèi)绻褂胊bsoulte或fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少一個(gè)，否則left/right/top/bottom屬性會(huì)使用它們的默認(rèn)值 auto ，這將導(dǎo)致對(duì)象遵從正常的HTML布局規(guī)則，在前一個(gè)對(duì)象之后立即被呈遞，簡(jiǎn)單講就是都變成relative，會(huì)占用文檔空間，這點(diǎn)非常重要，很多人使用absolute定位后發(fā)現(xiàn)沒有脫離文檔流就是這個(gè)原因，這里要特別注意~~~

少了left/right/top/bottom屬性不行，那如果我們多設(shè)了呢？例如，我們同時(shí)設(shè)置了top和bottom的屬性值，那元素又該往哪偏移好呢？記住下面的規(guī)則：

  • 如果top和bottom一同存在的話，那么只有top生效。
  • 如果left和right一同存在的話，那么只有l(wèi)eft生效。

既然absoulte是根據(jù)祖先類中的position非static元素進(jìn)行定位的，那么祖先類中的margin/padding會(huì)不會(huì)對(duì)position產(chǎn)生影響呢？看個(gè)例子先：

(5) 在absoulte定位中添加margin / padding屬性：

復(fù)制代碼
代碼如下:

#first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}
#second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}
<div id="first">first
<div id="second">second</div>
</div>

效果圖：

看懂了，祖先類的margin會(huì)讓子類的absoulte跟著偏移，而padding卻不會(huì)讓子類的absoulte發(fā)生偏移?？偨Y(jié)一下，就是absoulte是根據(jù)祖先類的border進(jìn)行的定位。

       Note : 絕對(duì)(absolute)定位對(duì)象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。而放置相對(duì)(relative)定位對(duì)象在可視區(qū)域之外，滾動(dòng)條不會(huì)出現(xiàn)。

固定定位(fixed)：

       fixed定位，又稱為固定定位，它和absoult定位一樣，都脫離了文檔流，并且能夠根據(jù)top、right、left、bottom屬性進(jìn)行定位，但不同的是fixed是根據(jù)窗口為原點(diǎn)進(jìn)行偏移定位的，也就是說它不會(huì)根據(jù)滾動(dòng)條的滾動(dòng)而進(jìn)行偏移。

z-index屬性：

       z-index，又稱為對(duì)象的層疊順序，它用一個(gè)整數(shù)來定義堆疊的層次，整數(shù)值越大，則被層疊在越上面，當(dāng)然這是指同級(jí)元素間的堆疊，如果兩個(gè)對(duì)象的此屬性具有同樣的值，那么將依據(jù)它們?cè)贖TML文檔中流的順序?qū)盈B，寫在后面的將會(huì)覆蓋前面的。需要注意的是，父子關(guān)系是無法用z-index來設(shè)定上下關(guān)系的，一定是子級(jí)在上父級(jí)在下。

Note：使用static 定位或無position定位的元素z-index屬性是無效的。

相關(guān)文章

最新評(píng)論