深入理解css中position屬性及z-index屬性
在網頁設計中,position屬性的使用是非常重要的。有時如果不能認識清楚這個屬性,將會給我們帶來很多意想不到的困難。
position屬性共有四種不同的定位方法,分別是static、fixed、relative、absolute,sticky。最後將會介紹和position屬性密切相關的z-index屬性。
第一部分:position: static
static定位是HTML元素的預設值,即沒有定位,元素出現在正常的流中,因此,這種定位就不會收到top,bottom,left,right的影響。
如html程式碼如下:
123 | <div class = "wrap" > <div class = "content" ></div> </div> |
css程式碼如下:
12 | .wrap{width: 300px;height: 300px; background: red;} .content{position: static ; top:100px; width: 100px;height: 100px; background: blue;} |
效果圖如下:
我們發現,雖然設定了static以及top,但是元素仍然出現在正常的流中。
第二部分:fixed定位
fixed定位是指元素的位置相對於瀏覽器視窗是固定位置,即使視窗是滾動的它也不會滾動,且fixed定位使元素的位置與文件流無關
html程式碼如下:
1 | <div class = "content" >我是使用fix來定位的!!!所以我相對於瀏覽器視窗,一直不動。</div> |
css程式碼如下:
12 | body{height:1500px; background: green; font-size: 30px; color:white;} .content{ position: fixed; right:0;bottom: 0; width: 300px;height: 300px; background: blue;} |
效果圖如下:
即右下角的div永遠不會動,就像經常彈出來的廣告!!!
值得注意的是:fixed定位在IE7和IE8下需要描述!DOCTYPE才能支援。
第三部分:relative定位
相對定位元素的定位是相對它自己的正常位置的定位。
關鍵:如何理解其自身的座標呢?
讓我們看這樣一個例子,hmtl如下:
123 | <h2>這是位於正常位置的標題</h2> <h2 class = "pos_bottom" >這個標題相對於其正常位置向下移動</h2> <h2 class = "pos_right" >這個標題相對於其正常位置向右移動</h2> |
css程式碼如下:
12 | .pos_bottom{position:relative; bottom:-20px;} .pos_right{position:relative;left:50px;} |
效果圖如下:
即bottom:-20px;;向下移動。 left:50px;向右移動。
即可以理解為:移動後是移動前的負的位置。
比如上例中,移動後是移動前負的bottom:-20px;即移動後是移動前bottom:20px;也就是說,移動後是移動前的向下20px;
又如:left:50px;移動後是移動前左邊的-50px;那麼也就是說移動後是移動前的右邊的50px。
即:移動後對於移動前:如果值為負數,則直接換成整數;如果值為整數,則直接改變相對方向。
弄清楚了relative是如何移動的,下面我們看一看移動之後是否會產生其他的影響。
html程式碼如下:
123 | < h2 >這是一個沒有定位的標題</ h2 > < h2 class="pos_top">這個標題是根據其正常位置向上移動</ h2 > < p >< b >注意:</ b > 即使相對定位元素的內容是移動,預留空間的元素仍儲存在正常流動。</ p > |
css程式碼如下:
1 | h2.pos_top{position:relative;top:-35px;} |
效果圖如下:
根據之前的說法,top:-35px;值是負數,則直接換成正數,即移動後相對與移動前向上偏移了35px;我們發現於上,移動後和上面的元素髮生了重疊;於下,即使相對元素的內容移動了,但是預留空間的元素仍然儲存在正常流動,也就是說相對移動之後,不會對下面的其他元素造成影響。
注意:top:20px;是指子元素的margin外側和包裹元素的border內側之間的距離是20px。
第四部分:absolute定位
絕對定位的元素相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麼它的位置相對於<html>。
下面舉幾個例子:
例子1:
12345678910111213141516171819 | <! DOCTYPE html> < html lang="en">
|