溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3中的定位怎么表示

發(fā)布時(shí)間：2022-03-30 11:54:31 來(lái)源：億速云 閱讀：170 作者：iii 欄目：web開(kāi)發(fā)

本文小編為大家詳細(xì)介紹“css3中的定位怎么表示”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css3中的定位怎么表示”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

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

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3中有哪些定位

定位:

  • 相對(duì)定位

  • 絕對(duì)定位

  • 固定定位

什么是定位?

定位指的就是將指定的元素?cái)[放到頁(yè)面的任意位置.通過(guò)定位可以任意的擺放元素.

通過(guò)position屬性來(lái)設(shè)置元素的定位

可選值:

  • static 默認(rèn)值，元素沒(méi)有開(kāi)啟定位.

  • relative 開(kāi)啟元素的相對(duì)定位

  • absolute 開(kāi)啟元素的絕對(duì)定位

  • fixed: 開(kāi)啟元素的固定定位(也是絕對(duì)定位的一種)

示例如下：

相對(duì)定位：

<html>
<head>
<style type="text/css">
h3.pos_left
{
position:relative;
left:-20px
}
h3.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h3>這是位于正常位置的標(biāo)題</h3>
<h3 class="pos_left">這個(gè)標(biāo)題相對(duì)于其正常位置向左移動(dòng)</h3>
<h3 class="pos_right">這個(gè)標(biāo)題相對(duì)于其正常位置向右移動(dòng)</h3>
<p>相對(duì)定位會(huì)按照元素的原始位置對(duì)該元素進(jìn)行移動(dòng)。</p>
<p>樣式 "left:-20px" 從元素的原始左側(cè)位置減去 20 像素。</p>
<p>樣式 "left:20px" 向元素的原始左側(cè)位置增加 20 像素。</p>
</body>
</html>

輸出結(jié)果：

css3中的定位怎么表示

絕對(duì)定位：

<html>
<head>
<style type="text/css">
h3.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h3 class="pos_abs">這是帶有絕對(duì)定位的標(biāo)題</h3>
<p>通過(guò)絕對(duì)定位，元素可以放置到頁(yè)面上的任何位置。下面的標(biāo)題距離頁(yè)面左側(cè) 100px，距離頁(yè)面頂部 150px。</p>
</body>
</html>

輸出結(jié)果：

css3中的定位怎么表示

固定定位：

<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>

輸出結(jié)果：

css3中的定位怎么表示

讀到這里，這篇“css3中的定位怎么表示”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手