整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
【技術(shù)等級(jí)】初級(jí)
【承接文章】《CSS三個(gè)重要的定位屬性，使用頻率超高，定位屬性詳解》
上兩篇文件主要講解了定位屬性的使用，本篇文章小海老師帶領(lǐng)大家利用定位屬性制作一個(gè)輪播圖的前端界面。本文屬于前端開發(fā)的初級(jí)教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
本文以動(dòng)手實(shí)踐為主，希望跟著學(xué)的同學(xué)們按照下面所講的步驟一步一步的操作一下。前端開發(fā)注重實(shí)踐操作，只要你按照小海老師所講的步驟操作，一定能夠掌握輪播圖界面的制作方式。如果能抽出時(shí)間多做幾次，熟能生巧，相信你會(huì)從中學(xué)習(xí)到在容器內(nèi)部對(duì)元素進(jìn)行定位的一類方法。
一、我們要做的輪播圖界面展示：
輪播圖案例界面展示
本案例旨在利用CSS的定位屬性制作輪播圖的界面，并不涉及輪播圖的各項(xiàng)行為。輪播圖的各項(xiàng)行為需要借助JavaScript腳本技術(shù)實(shí)現(xiàn)，在后續(xù)的內(nèi)容中會(huì)逐步介紹。首先我們對(duì)這個(gè)案例進(jìn)行一下簡(jiǎn)單的分析。
通過(guò)上圖，我們可以總結(jié)出，整個(gè)案例需要一個(gè)總的容器，我們可以使用<div></div>實(shí)現(xiàn)，并為其設(shè)置一個(gè)名為lunbo的id屬性取值。即：
<div id=”lunbo”></div>
在這個(gè)容器內(nèi)部，有下列對(duì)象：
一張圖片。（因?yàn)橹谱鹘缑妫哉故局环胖靡粡垐D片即可）
左右兩側(cè)各有兩個(gè)箭頭圖標(biāo)，用于鼠標(biāo)單擊產(chǎn)生輪播效果。
下方有一個(gè)黑色透明的部分。
黑色透明的部分內(nèi)部有5個(gè)數(shù)字組成的矩形，用于鼠標(biāo)單擊時(shí)跳轉(zhuǎn)到指定的圖片。
二、輪播圖界面布局的原理：
通過(guò)分析，我們發(fā)現(xiàn)，大部分內(nèi)容都在#lunbo的<div>容器中。那么，如何在容器內(nèi)部對(duì)各個(gè)元素進(jìn)行位置的確定呢？這就需要使用CSS技術(shù)中的定位屬性。
這里，有一個(gè)這類問(wèn)題的處理方法，它的原理如下所示。
根據(jù)上述原理，我們很容易就能寫出容器的CSS代碼。
這里設(shè)圖片的尺寸為800px*400px，則容器的CSS代碼如下所示：
#lunbo{
width:800px; height:400px;
position:relative;
}
三、實(shí)現(xiàn)容器內(nèi)部的HTML對(duì)象：
下面我們來(lái)實(shí)現(xiàn)容器內(nèi)部的各個(gè)HTML對(duì)象。注意，本小節(jié)只實(shí)現(xiàn)各個(gè)HTML對(duì)象，不對(duì)各個(gè)對(duì)象進(jìn)行CSS樣式設(shè)計(jì)。
1、一張圖片：
<img src=”images/01.jpg” />
2、左右兩側(cè)各有兩個(gè)箭頭圖標(biāo)：
左側(cè)箭頭利用小于號(hào)顯示，小于號(hào)在HTML中使用 < 實(shí)現(xiàn)。放在一個(gè)容器中并設(shè)置class為small。
右側(cè)箭頭利用大于號(hào)顯示，大于號(hào)在HTML中使用 > 顯示。放在一個(gè)容器中并設(shè)置class為big。
<div><</div>
<div>></div>
3、下方有一個(gè)黑色透明的部分：
<div class="black"></div>
4、黑色透明的部分內(nèi)部有5個(gè)數(shù)字組成的矩形：
五個(gè)數(shù)字分別用<span></span>標(biāo)記對(duì)實(shí)現(xiàn)的，并安排在一個(gè)名為num的容器中，最后放在黑色透明容器內(nèi)部。
<div class=”black”> <!--black容器開始-->
<div class="num"> <!--num容器開始-->
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div> <!--num容器結(jié)束-->
</div> <!--black容器結(jié)束-->
整體的HTML代碼如下所示。
輪播案例的HTML代碼
四、左右兩側(cè)箭頭圖標(biāo)的樣式：
左右兩側(cè)的箭頭設(shè)置寬度為40px，高度為60px，背景顏色位白色，并設(shè)置一定的透明度。字體為Arial，字體大小為50px，水平方向和垂直方向均居中對(duì)齊。文字顏色為#666666，鼠標(biāo)經(jīng)過(guò)時(shí)顯示手型鼠標(biāo)。
這些樣式兩個(gè)箭頭都具備，所以使用群組選擇器。
#lunbo .small,#lunbo .big{
width:40px; height:60px;
background-color:rgba(255,255,255,0.3);
font-family: Arial;
font-size: 50px;
text-align: center;
color:#666666;
cursor:pointer;
}
為了在容器#loubo中對(duì)這兩個(gè)箭頭定位，所以應(yīng)該將這兩個(gè)箭頭設(shè)置為“絕對(duì)定位”，并分別設(shè)置位置屬性。
因?yàn)閮蓚€(gè)箭頭的高度位置相同，所以top屬性取值一樣。通過(guò)測(cè)試，選擇top屬性為175px。
左側(cè)小于號(hào)箭頭設(shè)置left屬性為50px。
右側(cè)大于號(hào)箭頭設(shè)置right屬性為50px。
#lunbo .small,#lunbo .big{position:absolute;top:175px;}
#lunbo .small{left:50px;}
#lunbo .big{right:50px;}
除此之外，還需要為這兩個(gè)箭頭設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)的背景顏色變化。
#lunbo .small:hover,
#lunbo .big:hover{
background-color: rgba(255,255,255,0.6);
}
綜上所述，左右兩側(cè)箭頭圖標(biāo)的CSS樣式代碼如下所示。
左右兩側(cè)箭頭圖標(biāo)的CSS代碼
五、黑色透明的部分的樣式：
設(shè)置黑色透明的部分寬度為容器#lunbo的寬度，因此可以將寬度的取值設(shè)置為inherit，意思為寬度的大小繼承該元素容器的大小。高度設(shè)置為40px，背景顏色為黑色并帶有一定的透明度，利用定位將其設(shè)置在容器的底端。CSS代碼如下所示。
#lunbo .black{
width:inherit; height:40px;
background-color: rgba(0,0,0,0.7);
position:absolute;
left:0; bottom:0;
}
六、黑色透明部分內(nèi)部的數(shù)字：
做為數(shù)字的直接容器num，只需要設(shè)置位置屬性，以保證這5個(gè)數(shù)字的位置在黑色透明部分的右側(cè)。
#lunbo .num{
position:absolute;
right:10px;
bottom:8px;
}
容器num內(nèi)部的span標(biāo)記對(duì)用于盛放每一個(gè)數(shù)字。因?yàn)?lt;span>標(biāo)記對(duì)作為內(nèi)聯(lián)元素?zé)o法設(shè)置寬度和高度，所以將所有的<span>標(biāo)記對(duì)變?yōu)閮?nèi)聯(lián)塊。設(shè)置它們的寬度為20px，高度為24px，背景顏色位為999999，水平垂直方向居中對(duì)齊，文字顏色為#ffffff，字號(hào)大小為14px，鼠標(biāo)經(jīng)過(guò)時(shí)變?yōu)槭中褪髽?biāo)。為了讓它們之間具有一定的距離，可以設(shè)置每一個(gè)<span>的右邊界為10px。
#lunbo .num span{
display:inline-block;
width:20px; height:24px;
background-color: #999999;
text-align: center;
line-height: 24px;
color:#ffffff;
font-size: 14px;
margin-right:10px;
cursor:pointer;
}
最后設(shè)置這些<span>標(biāo)記對(duì)鼠標(biāo)經(jīng)過(guò)時(shí)背景顏色的變化。
#lunbo .num span:hover{
background-color: #ff5857;
}
綜上所述，黑色透明部分內(nèi)部的數(shù)字的CSS樣式代碼如下所示。
黑色透明部分內(nèi)部的數(shù)字的CSS代碼
七、結(jié)束：
最后請(qǐng)同學(xué)們將這些代碼整理到一起，看看能不能實(shí)現(xiàn)。
仔細(xì)的同學(xué)們肯定能夠發(fā)現(xiàn)，整個(gè)項(xiàng)目中，第一個(gè)數(shù)字的背景顏色和其它數(shù)字的背景顏色是不一樣的，這是為了說(shuō)明此時(shí)是第一張圖片在顯示。這是如何實(shí)現(xiàn)的呢？
<span style="background-color:#ff5857">1</span>
大家想一想，這段代碼是不是就能夠?qū)崿F(xiàn)了呢！
下一篇文章中，小海老師繼續(xù)帶大家實(shí)現(xiàn)跟定位有關(guān)的實(shí)例，一同看一看定位屬性都有哪些應(yīng)用領(lǐng)域，對(duì)定位技術(shù)有疑問(wèn)的學(xué)習(xí)者千萬(wàn)不要錯(cuò)過(guò)！
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過(guò)我寫的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門的感覺(jué)。這些文章都是我這幾年教學(xué)過(guò)程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡(jiǎn)單易懂的語(yǔ)言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長(zhǎng)，但是都要耗費(fèi)小海老師很久的時(shí)間。
希望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過(guò)我系統(tǒng)的歸納過(guò)的。
關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。
. 流式定位
這是網(wǎng)頁(yè)元素默認(rèn)的定位方式，網(wǎng)頁(yè)元素按照其HTML標(biāo)簽的先后順序，在網(wǎng)頁(yè)內(nèi)依次顯示，就像液體一樣“流動(dòng)”，所以稱為“流式定位”，這種方式將所有網(wǎng)頁(yè)元素的默認(rèn)顯示方式分為以下幾種類型：
塊級(jí)元素（display: block）： 可以設(shè)置寬度，默認(rèn)寬度為100%，但不管多寬都會(huì)獨(dú)占一行，多個(gè)塊級(jí)元素按從上到下的順序縱向顯示，默認(rèn)顯示為塊級(jí)元素的包括：段落(p)、層(div)、表單(form)等。
內(nèi)聯(lián)元素（display: inline）： 不會(huì)獨(dú)占一行，可以多個(gè)元素共享一行，按從左至右的順序橫向顯示，默認(rèn)顯示為內(nèi)聯(lián)元素的包括：文本標(biāo)簽(label)、鏈接(a)等。
行內(nèi)塊元素（display: inline-block）： 這種定位方式兼具塊級(jí)元素和內(nèi)聯(lián)元素的優(yōu)勢(shì)，既可以像塊級(jí)元素一樣設(shè)置寬度和高度，又可以一行放置多個(gè)，默認(rèn)顯示為內(nèi)聯(lián)元素的包括：圖片(img)、輸入項(xiàng)(input)、多行文本(textarea)等。
可以通過(guò)設(shè)置HTML元素的CSS樣式的display屬性來(lái)改變?cè)啬J(rèn)的流式定位方式，例如將層(div)元素設(shè)置為行內(nèi)塊元素后，就可以跟文本標(biāo)簽(label)、圖片(img)等元素放在同一行顯示，不再獨(dú)占一行。
流式定位存在一些問(wèn)題，主要包括：
l 塊級(jí)元素很難被有效利用起來(lái)，因?yàn)槠洫?dú)占一行的特性，不能一行顯示多個(gè)。
l 內(nèi)聯(lián)元素?zé)o法設(shè)置寬度、高度和垂直方向邊距，不好精確控制元素大小和顯示位置。
l 內(nèi)聯(lián)元素之間水平方向會(huì)因?yàn)榇a中的空格、換行等產(chǎn)生間隙，垂直方向存在默認(rèn)的底部間隙，這給水平布局帶來(lái)額外的麻煩。
2. 浮動(dòng)定位
浮動(dòng)定位會(huì)讓元素脫離原來(lái)的標(biāo)準(zhǔn)文檔流浮動(dòng)起來(lái)，直至它的外邊緣遇到父元素的內(nèi)邊緣或者另一個(gè)兄弟浮動(dòng)元素的外邊緣。
任何HTML元素都可以設(shè)置為浮動(dòng)，可以通過(guò)設(shè)置HTML元素的CSS樣式的float屬性來(lái)設(shè)置具體的浮動(dòng)方式，可以選擇向左浮動(dòng)（float: left）或向右浮動(dòng)（float: right）。
相對(duì)于網(wǎng)頁(yè)默認(rèn)的流式定位，浮動(dòng)定位有以下優(yōu)勢(shì)：
l 多個(gè)塊級(jí)元素可以共享一行。
l 內(nèi)聯(lián)元素可以設(shè)置寬度和高度。
l 元素之間的空格、換行不影響元素的顯示位置。
浮動(dòng)定位最初被設(shè)計(jì)出來(lái)是為了實(shí)現(xiàn)文字環(huán)繞圖片顯示的效果，但由于其上述優(yōu)勢(shì)，后來(lái)大家也用浮動(dòng)定位來(lái)設(shè)置更多網(wǎng)頁(yè)元素的位置，代替默認(rèn)的流式定位，也是TaskBuilder默認(rèn)的組件定位方式。
不過(guò)，浮動(dòng)定位也有一些問(wèn)題，不是所有的場(chǎng)合都適合，大家根據(jù)需要選擇，這些問(wèn)題包括：
l 居中對(duì)齊問(wèn)題：浮動(dòng)定位不太好實(shí)現(xiàn)垂直和水平居中對(duì)齊。
l 父元素的高度塌陷問(wèn)題：如果元素不浮動(dòng)，會(huì)自動(dòng)撐開父元素的高度，浮動(dòng)后，由于浮動(dòng)元素已經(jīng)脫離原來(lái)的標(biāo)準(zhǔn)流，如果父元素沒(méi)有設(shè)置高度，且父元素中沒(méi)有其他非浮動(dòng)元素時(shí)，會(huì)造成父元素的高度塌陷（高度變成了0）。
3. 坐標(biāo)定位
坐標(biāo)定位是指為HTML元素設(shè)置上下左右的偏移量來(lái)確定其具體的顯示位置或大小，通過(guò)設(shè)置元素CSS的position屬性，可以選擇坐標(biāo)定位的具體方式，包括：
相對(duì)定位（position: relative）：即相對(duì)于元素在流式定位時(shí)的正常位置進(jìn)行定位，您可以通過(guò) top、right、bottom、left 這 4 個(gè)CSS屬性來(lái)設(shè)置元素相對(duì)于正常位置的偏移量，在此過(guò)程中不會(huì)對(duì)其它元素造成影響。
相對(duì)定位示意圖
絕對(duì)定位（position: absolute）：即相對(duì)于第一個(gè)非靜態(tài)定位的父級(jí)元素進(jìn)行定位，可以通過(guò) top、right、bottom、left 這 4 個(gè)屬性來(lái)設(shè)置元素相對(duì)于父級(jí)元素位置的偏移量。如果沒(méi)有滿足條件的父級(jí)元素，則會(huì)相對(duì)于瀏覽器窗口來(lái)進(jìn)行定位。元素使用絕對(duì)定位后，其他標(biāo)準(zhǔn)流元素會(huì)填補(bǔ)它的位置。絕對(duì)定位可以通過(guò)設(shè)置元素CSS樣式的left和top屬性來(lái)精確控制元素的顯示位置，再設(shè)置right或bottom這兩個(gè)CSS樣式，實(shí)現(xiàn)元素的寬度或高度根據(jù)父元素的寬度和高度動(dòng)態(tài)設(shè)置和變化。
絕對(duì)定位示意圖
固定定位（position: fixed）：即相對(duì)于瀏覽器的窗口進(jìn)行定位，可以使用 top、right、bottom、left 這 4 個(gè)CSS屬性來(lái)定義元素相對(duì)于瀏覽器窗口的位置。使用固定定位的元素?zé)o論如何滾動(dòng)瀏覽器窗口，元素的位置都是固定不變的。
粘性定位（position: sticky）：它是相對(duì)定位和固定定位的結(jié)合體，能夠?qū)崿F(xiàn)類似吸附的效果，當(dāng)滾動(dòng)頁(yè)面時(shí)它的效果與相對(duì)定位相同，當(dāng)元素要滾動(dòng)到屏幕之外時(shí)則會(huì)自動(dòng)變成固定定位的效果。用粘性定位很容易實(shí)現(xiàn)元素置頂顯示的效果。
4. 表格定位
顧名思義，表格定位就是用表格來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容的定位，先繪制一個(gè)多行多列的表格，并設(shè)定表格各列的寬度和各行的高度，然后在表格的單元格里插入相關(guān)網(wǎng)頁(yè)元素，最終實(shí)現(xiàn)這些元素的位置定位。
這種定位方式比較適合可以將頁(yè)面內(nèi)容清晰明確地劃分為多行多列的場(chǎng)景，例如各種業(yè)務(wù)單據(jù)和數(shù)據(jù)報(bào)表等。
有兩種方式可以實(shí)現(xiàn)表格布局： HTML Table（<table>標(biāo)簽）和CSS Table（display:table 等相關(guān)屬性）。HTML Table是早期網(wǎng)頁(yè)設(shè)計(jì)采用的表格定位方式，由于其渲染性能較低，且有些界面效果較難實(shí)現(xiàn)，用的人已經(jīng)比較少了，現(xiàn)在推薦使用CSS Table，能實(shí)現(xiàn)一些HTML Table做不到的效果。
目前，TaskBuilder只是在報(bào)表設(shè)計(jì)器里集成了一個(gè)第三方的表格插件，在前端tfp頁(yè)面設(shè)計(jì)器里，還沒(méi)有提供表格定位相應(yīng)的容器組件，未來(lái)會(huì)提供。（現(xiàn)有的可編輯表格和數(shù)據(jù)表格不是用來(lái)為其他組件提供定位的，所以不能算作是表格定位的容器組件）
5. 彈性定位
彈性定位又叫彈性布局，這種定位方式最大的特點(diǎn)就是可以讓子元素的大小可以根據(jù)父元素的大小自動(dòng)擴(kuò)張或收縮，從而可以做到自動(dòng)適應(yīng)不同終端的屏幕尺寸，或者在用戶改變?yōu)g覽器窗口大小時(shí)自動(dòng)伸縮。
這種定位方式需要先將一個(gè)父元素的CSS屬性display設(shè)置為flex，然后該元素里的子元素即可實(shí)現(xiàn)彈性定位。
采用彈性定位的容器元素可以設(shè)置以下CSS樣式：
元素排列方向（flex-direction）：用來(lái)設(shè)置子元素的排列方向，有四種方式可以選擇：從左到右顯示（row）、從右到左顯示（row-reverse）、從上到下顯示（column）、從下到上顯示（column-reverse）。
元素水平對(duì)齊方式（justify-content）：用來(lái)設(shè)置子元素在水平方向的對(duì)齊方式，可以選左對(duì)齊（flex-start）、右對(duì)齊（flex-end）、居中對(duì)齊（center）、兩端對(duì)齊（space-between）和等距對(duì)齊（space-around）。
元素垂直對(duì)齊方式（align-items）：用來(lái)設(shè)置子元素在垂直方向的對(duì)齊方式，可以選頂部對(duì)齊（flex-start）、底部對(duì)齊（flex-end）、居中對(duì)齊（center）、基線對(duì)齊（baseline）、自動(dòng)伸展（stretch）。
內(nèi)容整體對(duì)齊方式（align-content）：當(dāng)有多行子元素時(shí)，可以用該屬性設(shè)置全部子元素整體的垂直對(duì)齊方式，包括自動(dòng)拉伸（stretch）、在容器的頂部排列（flex-start）、在容器的底部排列（flex-end）、在容器內(nèi)居中排列（center）、均勻分布，上下靠邊（space-between）、均勻分布，每行等距（space-around）。
元素是否自動(dòng)換行（flex-wrap）：用來(lái)設(shè)置子元素是否自動(dòng)換行。
彈性定位容器內(nèi)的子元素可以設(shè)置以下CSS樣式：
擴(kuò)展量（flex-grow）：必須參數(shù)，用來(lái)設(shè)置當(dāng)前元素相對(duì)于其他元素的增長(zhǎng)量，默認(rèn)值為 0，即如果存在剩余空間，也不自動(dòng)放大。
如果所有元素的擴(kuò)展量都設(shè)置為1，將等分剩余空間。如果一個(gè)元素的擴(kuò)展量設(shè)置為2，其他元素都為1，則前者占據(jù)的剩余空間將是其他項(xiàng)的2倍，如下圖所示：
收縮量（flex-shrink）：必須參數(shù)，用來(lái)設(shè)置當(dāng)彈性容器空間不足時(shí)，該元素相對(duì)于其他元素的收縮量，默認(rèn)值為 1。如果所有元素的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)元素的flex-shrink屬性為0，其他元素都為1，則空間不足時(shí)，前者不縮小。
基準(zhǔn)長(zhǎng)度（flex-basis）：必須參數(shù)，元素的基準(zhǔn)長(zhǎng)度定義了父容器在分配多余空間之前，當(dāng)前元素占據(jù)的主軸空間（main size，如果是橫向排列，則指父容器在水平方向的空間，如果是縱向排列，則指父容器在垂直方向的空間）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。合法值為 auto（默認(rèn)值，表示根據(jù)其他情況自動(dòng)伸縮），或者以具體的值加 "%"、"px"等單位的形式，表示該元素將占據(jù)固定空間。
顯示順序（order）：屬性用來(lái)設(shè)置元素在容器中出現(xiàn)的順序，您可以通過(guò)具體的數(shù)值來(lái)定義元素在容器中的位置，默認(rèn)值為 0。下圖所示的四個(gè)普通的面板組件，在彈性面板里從左至右的正常插入順序是panel1、panel2、panel3、panel4，但通過(guò)設(shè)置這四個(gè)面板的顯示順序，將panel1和panel4的顯示位置進(jìn)行了調(diào)換。
對(duì)齊方式（align-self）：該屬性允許您為某個(gè)特定的元素設(shè)置不同于其它元素的對(duì)齊方式，該屬性可以覆蓋父容器組件（彈性面板）里的垂直對(duì)齊屬性的值。該屬性的可選頂部對(duì)齊（flex-start）、底部對(duì)齊（flex-end）、居中對(duì)齊（center）、基線對(duì)齊（baseline）、自動(dòng)伸展（stretch）。
由于彈性定位的自動(dòng)伸縮特性，且易于實(shí)現(xiàn)子元素的水平和垂直對(duì)齊，目前很多主流的前端UI框架都大量地采用了該定位方式。
今天好程序員web前端教程為大家分享web中CSS絕對(duì)定位的教程
絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。
普通流中其它元素的布局就像絕對(duì)定位的元素不存在一樣：
#box_relative{
position:absolute;
left:30px;
top:20px;
}
如下圖所示：
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。
對(duì)于定位的主要問(wèn)題是要記住每種定位的意義。所以，現(xiàn)在讓我們復(fù)習(xí)一下學(xué)過(guò)的知識(shí)吧：相對(duì)定位是“相對(duì)于”元素在文檔中的初始位置，而絕對(duì)定位是“相對(duì)于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對(duì)于”最初的包含塊。
注釋：根據(jù)用戶代理的不同，最初的包含塊可能是畫布或HTML元素。
提示：因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素。可以通過(guò)設(shè)置z-index屬性來(lái)控制這些框的堆放次序。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
