首頁 > web前端 > H5教程 > 主體

深入理解html5中的position

黄舟
發布: 2017-07-19 14:32:02
原創
5007 人瀏覽過

CSS的Position很重要,position一共有4個屬性值,就是以下幾個值:

                      l,      ic),

元素的位置透過 "left", "top", "right" 以及 "bottom" 屬性進行規定,顯示層級透過z-index控制。

static:靜態定位。如果你沒有設定position屬性,那麼預設就是static。 top,left,bottom,right等屬性,在static的情況下是無效的,要使用這些屬性,必須把position設定為其他三個值之一。

relative:relative 元素遵循正常的文件流,所以周圍元素不會忽略它的存在,relative 元素同樣支持 top,bottom,left,right等屬性。當我們使用 top,bottom,left,right等屬性對 relative 元素進行相對定位時的效果有點類似 margin 屬性達到的效果,但是差異在於, relative 元素周圍的元素將會忽略 relative 元素的移動

# p 
{
background:#ccc; width:200px; height:200px;
position:relative; left:200px; top:200px
}
登入後複製


absolute:absolute 元素將會脫離正常的文件流,所以其周圍的元素將會忽略它的存在。如同 absolute 元素的 display 屬性設定為了 none 。此時,我們可以使用 top,bottom,left,right 等屬性對 absolute 元素進行絕對定位。一般情況下定義兩個屬性,top 或 bottom,left 或 right

# p 
{
background:#ccc; width:200px; height:200px;
position:absolute; left:200px; top:200px
}
登入後複製


fixed:固定定位。元素將被設定在瀏覽器上一個固定位置上,不會隨其他元素滾動。圖像點說,上下拉動捲軸的時候,fixed的元素在螢幕上的位置不變。需要注意的是IE6並不支援此屬性。

首先,fixed 元素定位與它的父元素沒有任何關係,它永遠是相對最外層的 window 進行定位的。
第二,fixed 元素就像它的名字一樣,它是固定在螢幕的某個位置,它不會因為螢幕的捲動而消失。

# p 
{
background:#ccc; width:200px; height:200px;
position:fixed; left:200px; top:200px
}
登入後複製


position屬性在CSS佈局中是至關重要的,真正的了解了position屬性會對今後學習p加CSS有很大的幫助

以上是深入理解html5中的position的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板