建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細講解有關(guān)css中的position屬性有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)專注于鶴壁企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站制作。鶴壁網(wǎng)站建設(shè)公司,為鶴壁等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
position屬性介紹
（1）css中position屬性自CSS2起就有了，該屬性規(guī)定元素的定位類型。所有主流瀏覽器都支持position屬性。
（2）css中position屬性的可選值有四個：static、relative、absolute、fixed。下面分別進行介紹。（其實還有個inherit，不過這個是IE特有的，這里就不做討論）
1，基本介紹
（1）static是默認值。表示沒有定位，或者說不算具有定位屬性。
（2）如果元素position屬性值為static（或者未設(shè)position屬性），該元素出現(xiàn)在正常的流中（忽略top,bottom,left,right或者z-index聲明）。
2，使用樣例
css:
html:
我們不設(shè)置元素的postion屬性值，那么默認的顯示效果如下：
2345截圖20180816103058.png
1，基本介紹
（1）relative生成相對定位的元素，相對于其正常位置進行定位。
（2）相對定位完成的過程如下：
首先按默認方式（static）生成一個元素(并且元素像層一樣浮動了起來)。
然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
2，樣例代碼
下面代碼將文本輸入框position設(shè)置為relative（相對定位），并且相對于默認的位置向右、向上分別移動15個像素。
css:
div{
width:200px;
height:100px;
background-color:#C9FFFF;
}
input{
position:relative;
left:15px;
top:-15px;
}
html:
關(guān)于“css中的position屬性有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
網(wǎng)頁標題：css中的position屬性有哪些
本文路徑：http://www.dlmjj.cn/article/igieoi.html
