position
檢索對象的定位方式.
取值:
1.static
預設值.無特殊定位,遵循HTML定位規則.
注意:當position為static時,定義top,left,bottom,right是不起作用的.
2.absolute
將對象從文檔流中拖出,不再佔據元素在文檔中的正常位置.
使用top,left,bottom,right等屬性相對於其最接近的一個有定位設定的父物件進行絕對位置.
注意:a.相對於最接近的父物件;b.有定位設定的父物件.
3.relative:
對象不可層疊,而且元素佔據著元素自身原來的位置.
根據top,left,bottom,right在文檔流中進行正常的位移.
注意:相對位移,此處的相對,是相對的對象自身.
例如:原來對象的位置是在(100,100),那麼位移之後,是在(100,100)的基礎上進行位移.
下面,用代碼來進行描述:
預設什麼都不使用,此時,預設是static設定.
代碼:
<html xmlns="http://www.w3.org/1999/xhtml"><head> <style type="text/css"> #main { border: solid 1px silver; width:300px; height:300px; } #sub1,#sub2 { border:solid 1px red; width:100px; height:100px; } #sub1 { background-color:Silver; } #sub2 { background-color:Green; } </style></head><body style="margin:10px">
<div id="main">
<div id="sub1"></div>
<div id="sub2"></div>
</div>
</body>
</html>
效果:
現在來看relative.僅對sub1進行設定.
代碼:
#sub1 { background-color:Silver; position:relative; top:200px; left:200px; }
效果:
注意:
1.系統中標出sub1的原始位置.可以看出,sub1仍然佔據著原來的位置,只是在視覺效果上進行了位移.
2.此處,sub1的top,left位置相對於原來位移了(200,200);而sub2的位置並沒有發生任何變化.
3.relative是相對於元素自身的位置進行位移的.
下面,我們來看關於position為absolute的設定.
當一個元素的position設定為absolute的時候,該元素是不是相對於瀏覽器視窗(0,0)進行位移的呢?
答案是:不是的.此處分為兩種情況.
1.當元素的父級對象(包括父級對象的父級對象)也設定了position屬性,且屬性為absolute或者relative時,也就是說,不是預設的static時,此時的元素按照這個父元素進行定位
代碼:
#main { border: solid 1px silver; width:300px; height:300px; position:absolute; top:100px; left:100px; } #sub1 { background-color:Silver; position:absolute; top:100px; left:100px; }
效果:
2.如果元素不存在一個有這position屬性的父元素時,元素就以body為定位.
代碼:
#sub1 { background-color:Silver; position:absolute; top:100px; left:100px; }
效果:
注意:
1.sub2覆蓋了sub1的原始位置
2.body的margin屬性是10px.
最後,來看一下position為fixed的設定.
fixed是特殊的absolute,即fixed總以body為定位對象.
代碼:
在absolute的代碼1的基礎上進行修改:
#sub1 { background-color:Silver; position:fixed; top:50px; left:50px; }
效果:
注意:
1.main的位置相對於body為(100,100)
2.sub1的位置相對於body為(50,50)
3.sub2的位置相對於body為(100,100)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
