本篇文章給大家分享的是有關(guān)css相對定位和絕對定位有什么區(qū)別,小編覺得挺實用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、淶水網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為淶水等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。CSS定位,顧名思義,CSS position屬性定義了元素在網(wǎng)頁上的定位方式。
因此,有幾種類型的定位:static, relative, absolute, fixed, sticky, initial和inherit。首先,讓我們解釋所有這些類型的含義。
static(靜態(tài)) - 這是默認(rèn)值,所有元素按順序顯示在文檔中。
relative(相對) - 元素相對于其正常位置定位。
absolute(絕對) - 元素絕對定位于其第一個定位的父元素。
fixed(固定) - 元素與瀏覽器窗口相關(guān)。
sticky(黏性)- 元素根據(jù)用戶的滾動位置定位。
現(xiàn)在我們已經(jīng)解釋了基礎(chǔ)知識,我們將更多地討論兩個最常用的位置值 -relative(相對)和absolute(絕對)。
什么是相對定位?
當(dāng)你設(shè)置相對于元素的位置時,不添加任何其他定位屬性(頂部,底部,右側(cè),左側(cè))將不會發(fā)生任何事情。當(dāng)您添加除相對位置之外的其他位置時,例如left:20px,該元素將從其正常位置向右移動20px。在這里,您可以看到此元素與其自身相關(guān)。當(dāng)元素移動時,布局上的其他元素都不會受到影響。
設(shè)置位置時應(yīng)注意的事項 - 相對于元素限制了絕對定位的子元素的范圍。這意味著作為此元素的子元素的任何元素都可以絕對定位在此塊中。
在這個簡短的解釋之后,我們需要通過展示一個例子來支持它。
在此示例中,您將看到相對定位元素在其屬性更改時如何移動。第一元件移動到左側(cè)和頂部從其正常位置,而所述第二元件保持在相同的位置,因為沒有附加的定位的屬性被改變。
HTML:
<div id=”first_element”>First element</div> <div id=”second_element”>Second element</div>
CSS:
#first_element { position: relative; left: 30px; top: 70px; width: 500px; background-color: #fafafa; border: solid 3px #ff7347; font-size: 24px; text-align: center; } #second_element { position: relative; width: 500px; background-color: #fafafa; border: solid 3px #ff7347; font-size: 24px; text-align: center; }
什么是絕對定位?
絕對定位允許您將元素精確放置在您想要的位置。
絕對定位完成相對于所述第一相對(或絕對)位于父元素。在沒有定位父元素的情況下,位置設(shè)置為絕對的元素將直接與HTML元素(頁面本身)相關(guān)聯(lián)。
使用絕對定位時要記住的一件重要事情是確保它不會被過度使用,否則會導(dǎo)致維護(hù)困難。
接下來的另一件事是展示絕對定位的一個例子。
在示例中,父元素的位置設(shè)置為relative。現(xiàn)在,當(dāng)您將子元素的位置設(shè)置為絕對時,將相對于父元素執(zhí)行任何其他定位。子元素相對于父元素的頂部移動100px,父元素的右移移40px。
HTML:
<div id=”parent”> <div id=”child”></div> </div>
CSS:
#parent { position: relative; width: 500px; height: 400px; background-color: #fafafa; border: solid 3px #9e70ba; font-size: 24px; text-align: center; } #child { position: absolute; right: 40px; top: 100px; width: 200px; height: 200px; background-color: #fafafa; border: solid 3px #78e382; font-size: 24px; text-align: center; }
以上就是css相對定位和絕對定位有什么區(qū)別,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降摹OM隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。
網(wǎng)頁題目:css相對定位和絕對定位有什么區(qū)別-創(chuàng)新互聯(lián)
URL地址:http://www.chinadenli.net/article8/ccsgip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、建站公司、Google、搜索引擎優(yōu)化、網(wǎng)站策劃、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容