1. 程式人生 > >css之定位屬性

css之定位屬性

color 進行 塊級元素 文檔 定義 adding absolut 表示 頁面

定位標簽:position
包含的屬性:relative(相對)與 absolute(絕對)
1.position:relative:如果對一個元素進行相對定位,首先它將出現在它所在的位置上。

然後通過設置垂直或水平位置,讓這個元素“相對於”它的原始起點進行移動。

再一點,相對定位時,無論是否進行移動,元素仍然占據原來的空間。因此,移動元素會導致它覆蓋其他框

例如:.mybox{
  position:relative;
  left:20px;
  top:20px;
}
效果就是使這個層向下和向左移動了20px。

2.position:absolute:表示絕對定位,位置將依據瀏覽器左上角的0點開始計算,絕對定位元素與文檔流無關,因此不占據空間。

(因為絕對定位的框與文檔流無關,所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制這些框的堆放次序。

z-index的值越高,框在堆中的位置就越高。)


在元素的父級元素定義為position:relative;需要絕對定位的元素設為position:absolute;

這樣再設定top,right,bottom,left的值就可以了,這樣其定位的參照標準就是父級的左上角padding的左上側

絕對定位到同一個位置,後來居上。 z-index:( 1~999)數字越大,就越在上面。


display:block; 把局部元素(行內標簽) 轉換為 塊級元素(行標簽)


display:inline;把 塊級元素(行標簽) 轉換為 局部元素(行內標簽)


display:inline-block;轉為行內塊級元素

css之定位屬性