css之定位屬性
阿新 • • 發佈:2017-06-18
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之定位屬性