position 這個屬性是在網頁css排版中會經常用到的, 但是它存在許多需要注意的地方
例如 z-index 層級的問題, 有時候設定錯誤會產生非常尷尬的現象, 像是現在很流行
製作浮動固定式的 header 一旦你的層級出現錯誤就會發生違和的重疊畫面
這種現象跟你的html階層排版也有關係,
有時候不是你一個設定 z-index:0; 一個設定 z-index:10;
就一定能避免這種現象！
position 常用的屬性有以下
relative : 相對位置 不浮動也不固定 只能靠 top類屬性移動小位置
absolute : 絕對位置 是屬於浮動式但是不會固定視窗位置;
fixed : 浮動式可隨視窗固定位置; 這個沒什麼好講的, 就是浮動效果
他們共用的幾個值分別為
top , left , right , bottom // 這是針對位置
z-index 為層級
例如：
style {
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:99;
}
我就講講position: relative; 這個屬性
一般這個屬性不太會獨立用到,為什麼這樣講呢？
這個屬性就我而言他是拿來與 absolute 做互相對應的
例如說這是你的html
<div class="box">
<div class="bar">
我在這裡
</div>
</div>
box 為父元素
bar 為子元素
(示意畫面)
今天我想讓bar這個標籤移到黑咖啡色的右上角
(示意畫面)
如果你直接針對bar設定以下：
.bar {
position: absolute;
top:0;
left:0;
}
會變成像這樣 , 這對初學者來說絕對是悲劇, 你會搞到想哭, 
(示意畫面)
但有可能你胡亂設定一個值 , 終於讓它跑到色框的右上方
也自己為大功終於告成了！
例如：top: 500px right:400px;
接下來改變視窗大小....恩, 他就又跑掉了
absolute 就像是個非常調皮的小孩 , 必須要有個大人來管制它！
所以正確的方法應該是
你必須在box設定一個relative屬性 像是....
.box {
position: relative;
}
在設定
.bar {
position: absolute;
top:0;
left:0;
}
如此一來你所賦予absolute的標籤 它就會乖乖聽話了
position: relative; 這個屬性就我的經驗來說, 如果子元素裡頭沒有任何一樣
是會運用到absolute屬性的, 我是建議能不要用就不用要,
應該多運用padding margin , 因為 relative 它單獨使用的效果其實跟p,m兩者
沒兩樣 , 而且還會潛在著層級重疊的bug , 裡頭會運用到absolute 那你一定要
用到relative來管理它們！
因為筆者在公司遇過很多新來學設計的同事, 他們在外面自己有研究過html&css
但畢竟還是初學者, 像這類css屬性相呼應的地方如果沒有深入研究真的都會
犯到以上錯誤！
所有有時候一個基礎的說明 是可以幫到大忙的！
留言列表
