怎么用CSSrelative-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)怎么用CSS relative，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的武漢網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

 在css的position屬性中有四個(gè)屬性值：static（靜態(tài)的）、relative（相對的）、fixed（固定的）、absolute（絕對的），今天的這篇文章就來給大家介紹一下CSS中relative（相對）定位的用法

首先我們來簡單看一下relative（相對）定位的概念

根據(jù)W3C上的定義我們可以知道相對定位是一個(gè)非常容易掌握的概念。如果對一個(gè)元素進(jìn)行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對于”它的起點(diǎn)進(jìn)行移動(dòng)。

簡而言之，設(shè)置為相對定位的元素框會(huì)偏移某個(gè)距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

看完了css relative（相對）定位的概念后，我們就來詳細(xì)說一說relative的用法

對于相對定位在css中我們都這樣使用：position: relative;

我們先來看一個(gè)例子


<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)題相對于其正常位置向左移動(dòng)</h3>
<h3 class="pos_right">這個(gè)標(biāo)題相對于其正常位置向右移動(dòng)</h3>
</body>
</html>

效果如下：


怎么用CSS relative

看完了上述的例子我們大概知道了相對定位的一個(gè)簡單的用法，接下來我們就來看看相對定位的其他用法。

relative對absolute的限制作用

我們知道，absolute定位的是其第一個(gè)祖先元素定位屬性不為static屬性，如果沒有relative或者fixed定位的情況下，給absolute添加top/left、right/bottom等屬性可以發(fā)生偏移，但是如果給父元素添加position: relative之后，則absolute的偏移能力被父元素限制住了。

relative對overflow的限制作用

我們來看一個(gè)例子：


<div class="box">
    <div class="son"></div></div>
    <div class="box" style="position: relative">
    <div class="son"></div></div>
.box{
    overflow: hidden;
   width: 50px;
    height: 50px;
    background-color: #dddddd;
}
.son{
    position: absolute;
   width: 100px;
    height: 100px;
    background-color: #cd0000;
}

在這個(gè)例子中，.box的寬和高都是50px，而.son元素的寬和高都是100px，雖然.box元素設(shè)置了overflow:hidden，但依然限制不了.son元素的大小，其寬和高都是100px，而當(dāng).box設(shè)置了定位屬性relative后，.son元素的寬和高就變成了50px。

relative對層級(jí)z-index的限制作用

頁面中的倆個(gè)absolute的z-index不同,有各自的層級(jí),當(dāng)這兩個(gè)absolute的父類都有relative的時(shí)候,它們的層級(jí)就依賴于父類的relative的z-index。

看完上述內(nèi)容，你們對怎么用CSS relative有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：怎么用CSSrelative-創(chuàng)新互聯(lián)
文章位置：http://muchs.cn/article28/ddhgjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、域名注冊、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名