相對父元素定位

1.position:relative; 若是對一個元素進行相對定位,首先它將出如今它所在的位置上。而後經過設置垂直或水平位置,讓這個元素「相對於」它的原始起點進行移動。(再一點,相對定位時,不管是否進行移動,元素仍然佔據原來的空間。所以,移動元素會致使它覆蓋其餘框)
例如:#mybox{
position:relative;
left:20px;
top:20px;
}
效果就是使這個層向下和向左移動了20px。
2.position:absolute; 表示絕對定位,位置將依據瀏覽器左上角的0點開始計算,
絕對定位使元素與文檔流無關,所以不佔據空間。普通文檔流中其這元素的佈局就像絕對定位的元素不存在時同樣。它相對於最近的已定位的祖先元素。若是元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。根據用戶代理的不一樣,最初的包含塊多是畫布事HTML元素。(由於絕對定位的框與文檔流無關,因此它們能夠覆蓋頁面上的其餘元素並能夠經過z-index來控制這些框的堆放次序。z-index的值越高,框在堆中的位置就越高。)

那麼有個問題產生了,如今你們作的網頁大部分是居中的,那麼我須要這個元素跟着網頁

中的某個元素位置不論分辨率是多少他的位置始終是針對頁內的某個元素的,那麼單純的

absolute是不行的。


正確的解決方法就是在元素的父級元素定義爲position:relative;(更正:這裏能夠是祖父

級,也能夠是position:absolute;)須要絕對定位的元素設爲position:absolute;

這樣再設定top,right,bottom,left的值就能夠了,這樣其定位的參照標準就是父級的左上角padding的左上側!瀏覽器

相關文章
相關標籤/搜索