本文小編為大家詳細介紹“css3中的定位怎么表示”，內容詳細，步驟清晰，細節處理妥當，希望這篇“css3中的定位怎么表示”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

創新互聯公司2013年至今，先為武定等服務建站，武定等地企業，進行企業商務咨詢服務。為武定企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

css3中的定位類型：1、相對定位，語法為“元素{position:relative;}”；2、絕對定位，語法為“元素{position:absolute;}”；3、固定定位，語法為“元素{position:fixed;}”。

本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3中有哪些定位

定位:

• 相對定位

• 絕對定位

• 固定定位

什么是定位?

定位指的就是將指定的元素擺放到頁面的任意位置.通過定位可以任意的擺放元素.

通過position屬性來設置元素的定位

可選值:

• static 默認值，元素沒有開啟定位.

• relative 開啟元素的相對定位

• absolute 開啟元素的絕對定位

• fixed: 開啟元素的固定定位(也是絕對定位的一種)

示例如下：

相對定位：

h3.pos_left
{
position:relative;
left:-20px
}
h3.pos_right
{
position:relative;
left:20px
}



這是位于正常位置的標題
這個標題相對于其正常位置向左移動
這個標題相對于其正常位置向右移動
相對定位會按照元素的原始位置對該元素進行移動。
樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。
樣式 "left:20px" 向元素的原始左側位置增加 20 像素。

輸出結果：

絕對定位：

h3.pos_abs
{
position:absolute;
left:100px;
top:150px
}



這是帶有絕對定位的標題
通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。

輸出結果：

固定定位：

p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}



一些文本。

更多的文本。

輸出結果：

讀到這里，這篇“css3中的定位怎么表示”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注創新互聯行業資訊頻道。