當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > DIV+CSS > css position元素的定位屬性

css position元素的定位屬性

2012/11/27 10:24:12作者：佚名來源：網絡

移動端

【實例介紹】

css position元素的定位屬性

在CSS布局中，position屬性非常重要，很多特殊容器的定位必須用position來完成。通過使用position屬性，我們可以選擇4種不同類型的定位。

【基本語法】

position：static |   absolute |   fixed |   relative
top：auto |   長度值   |   百分比
right：auto |   長度值 |   百分比
bottom：auto |   長度值 |   百分比
left：auto |   長度值 |   百分比

【語法介紹】

從上面的語法可以看出，定位的方法有很多種，它們分別是靜態定位(static)、絕對定位(absolute)、固定定位(fixed)和相對定位(relative)，其具體功能如表所示。

position的屬性及其功能說明

position的屬性              功能說明
aboslute                         生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。元素的位置通過left、top、right以及bottom屬性進行規定
fixed                                 生成固定定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過left、top、right以及bottom屬性進行規定
relative                            生成相對定位的元素，相對于其正常位置進行定位
static                                默認值。沒有定位，元素出現在正常的流中

【實例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>position定位</title>
</head>
<style>
.box{ width:250px; height:250px; 
position:absolute; top:150px; left:50px; 
background:#F93; font-family: "宋體"; color:# 03}
</style>
<body>
<div class="box">這里的box在設置了position:absolute后，
是以body的左上角為原始點定位的。</div>
</body>
</html>

【代碼分析】

代碼加粗的部分使用position設置為絕對定位，并且設置距離左側1 50像素，距離頂部50像素。這里的box在設置了position：absolute后，是以body的左上角為原始點定位的，如圖所示。

元素的定位屬性position運行效果

【素材及源碼下載】

請點擊：元素的定位屬性css position 下載本實例相關素材及源碼

標簽：定位

上一篇：css clear清除浮動屬性
下一篇：css上邊偏移屬性top、下邊偏移屬性bottom

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频