HTML和CSS——定位詳解

當(dāng)在這一個(gè)頁面上實(shí)現(xiàn)布局和定位有幾種不同的技術(shù)。使用哪種技術(shù)，很大程序上取決于內(nèi)容和目標(biāo)頁面，因?yàn)橛泻芏嗉夹g(shù)比別人的更牛。
例如，浮動(dòng)可以讓頁面元素并排顯示，而且還可以制作一個(gè)干凈的布局。然而，有時(shí)候需要一些嚴(yán)格的定位，這時(shí)需要使用其他的技術(shù)，包括“relative”和“absolute”定位。
在這節(jié)課中，我們先來介紹一下浮動(dòng)的使用，接下來詳細(xì)介紹定位的技巧，包括如何準(zhǔn)確的給元素在X軸、Y軸和Z軸定位。

  • 包含浮動(dòng)
  • 定位屬性
  • z-index屬性

包含浮動(dòng)

創(chuàng)建一全頁面的布局時(shí)，浮動(dòng)是一種常用的方法，也是頁面元素定位的一種基本功能。浮動(dòng)可以讓元素一個(gè)挨著一個(gè)。浮動(dòng)可以創(chuàng)建一個(gè)自然流布局，同時(shí)充許元素設(shè)置自身尺寸和其父元素容器的尺寸大小。

當(dāng)元素浮動(dòng)時(shí)，一個(gè)元素的位置依賴于放置在他周邊的其他元素。那么圍繞在他周邊的是哪個(gè)元素呢？這個(gè)元素會(huì)換行嗎？這一切都取決于圍繞于他的元素的DOM（文檔對(duì)象模型）。

DOM是什么？
DOM是Document Object Model的簡稱，被譯為文檔對(duì)象模型。是HTML或者XML文檔結(jié)構(gòu)的API。在我們的例子中，我們說的是HTML的文檔，因此DOM就是代表所有元素以及這些元素之間的關(guān)系。
可以考慮樹形的表現(xiàn)方式，展元素元素之間的關(guān)系。元素嵌套時(shí)他們存在父子關(guān)系，相同級(jí)別的還存在兄弟關(guān)系。

雖然浮動(dòng)相當(dāng)?shù)慕o力，但他們自己還是存在一定的問題。最典型的問題就是一個(gè)父元素包含了多個(gè)浮動(dòng)的子元素。頁面的內(nèi)容設(shè)置了一個(gè)寬度，子元素的浮動(dòng)確定了他們的位置，但浮動(dòng)元素不會(huì)影響父元素的寬度。這樣做會(huì)讓父元素塌陷，從而使父元素的高度為“0”，以及忽略其他的屬性。很多時(shí)候，這種現(xiàn)像都被忽略，特別是在父元素沒有任何樣式，以及其子元素看起來都正確的對(duì)齊。

嵌套的元素不會(huì)正確的排列，也會(huì)有錯(cuò)誤的樣式出現(xiàn)。來看看下面的演示，在“.box-set”的div應(yīng)該有一個(gè)高亮的灰色背景，因?yàn)樗械淖釉馗?dòng)后，這個(gè)灰色的背景色并不看到。仔細(xì)檢查后，“.box-set”的高度變成了“0”。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div> </code>

CSS
<code>.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 100px;
float: left;
margin: 10px;
width: 200px;
} </code>

DEMO效果

包含浮動(dòng)

有一種方法，在容器的結(jié)束標(biāo)簽前添加一個(gè)空標(biāo)簽，在空標(biāo)簽上直接設(shè)置樣式“clear:both”。用這種方法來清除浮動(dòng)，在大多數(shù)情況下是有效的，但這不太適合語義化。這取決于一個(gè)頁面有多少浮動(dòng)需要清除，這樣造成頁面上的空標(biāo)簽迅速堆積，而且在頁面中沒有上下文內(nèi)容。

幸運(yùn)的是有幾種不同方法可以用來清除浮動(dòng)，而其中用得最多的是“overflow”技巧和"clearfix"技巧。

Overflow技巧
一種清除浮動(dòng)的技巧是使用“overflow”屬性。在具有浮動(dòng)元素的父容器中設(shè)置“overflow”的屬性值為“auto”，這樣父容器就會(huì)有一個(gè)高度存在，在我們例子中的灰色背景也就能看得到了。

在IE6里面，父容器是需要設(shè)置一個(gè)“width”和“height”。因?yàn)楦叨瓤赡苁且粋€(gè)變量，寬度為100%，他們將能正常的工作。使用“overflow:auto;”,在IE瀏覽器中會(huì)給元素添加滾動(dòng)條，這樣一來，最好是直接使用“overflow:hidden;”來清除浮動(dòng)。

<code>.box-set { background: #404853; overflow: auto;} </code>

清除浮動(dòng)后效果

包含浮動(dòng)

使用“overflow”技巧清除浮動(dòng)，確實(shí)存在一些缺點(diǎn)。例如：當(dāng)你添加樣式，或者將嵌套在里面的“span”元素移動(dòng)到父容器的外面，或者你想給元素添加一個(gè)盒子陰影和制作一個(gè)下拉菜單。在下面的演示例子中，你可以看到元素的盒子陰影被切斷在父元素之內(nèi)。

不同的瀏覽器對(duì)“overflow”屬性解析不一樣，在瀏覽器的顯示風(fēng)格也不一樣?？纯聪旅娴睦?，注意列在不同瀏覽器的顯示效果。

包含浮動(dòng)

clearfix技巧
根據(jù)上下文，清除浮動(dòng)更好的方法是clearfix技巧?！癱learfix”清除浮動(dòng)的技術(shù)是有點(diǎn)復(fù)雜，但有有比使用“overflow”技巧清除浮動(dòng)更好的方法？

“clearfix”技巧是基于在父元素上使用“:before”和“:after”兩個(gè)偽類。使用這些偽類，我們可以在浮動(dòng)元素的父容器前面和后面創(chuàng)建隱藏元素。“:before”偽類是用來防止子元素頂部的外邊距塌陷，使用“display: table”創(chuàng)建一個(gè)匿名的“table-cell”元素。這也確保在IE6和IE7下具有一致性。“:after”偽類是用來防止子元素的底部的外邊距塌陷，以及用來清除元素的浮動(dòng)。

在IE6和7的瀏覽器中，加上“*zoom”屬性來觸發(fā)父元素的hasLayout的機(jī)制。決定了元素怎樣渲染內(nèi)容，以及元素與元素之間的相互影響。

采取上面同樣的例子，你可以看到容器也清除了浮動(dòng)，元素也可以移到父容器外面：
<code>.box-set:before,.box-set:after {
content: "";
display: table;
}
.box-set:after {
clear: both;
}
.box-set {
*zoom: 1;
} </code>

清除浮動(dòng)后效果

包含浮動(dòng)

有效的包含浮動(dòng)
使用哪種技巧來清除浮動(dòng)，終究要看你自己喜好。有些人堅(jiān)持使用“clearfix”來清除浮動(dòng)，因?yàn)檫@種方法可以貫穿整個(gè)項(xiàng)目。有些人認(rèn)為“clearfix”技巧使用的代碼太多，他還是喜歡簡單點(diǎn)的。至于使用什么技巧由您來決定，只要在運(yùn)用了浮動(dòng)的元素的父容器需要清除浮動(dòng)。

一個(gè)常見的方法是將定義一個(gè)類名，把這個(gè)類名加到需要清除浮動(dòng)的容器上。例如使用“clearfix”清除浮動(dòng)，Dan Cederholm為容器設(shè)置了一個(gè)類名“group”。在需要清除浮動(dòng)的容器上添加這個(gè)類名“group”。
<code>.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
*zoom: 1;
}</code>

單個(gè)偽類
值得注意的是，目前每個(gè)元素只有一個(gè)“:before”和“:after”偽類。當(dāng)你嘗試使用其他的“:before”和“:after”的clearfix技巧，你的內(nèi)容可能無法達(dá)到想要的效果。

在上面的例子中，clearfix的樣式不應(yīng)該直接插入到“.box-set”類中，應(yīng)該是給需要清除浮動(dòng)的元素中添加類名“group”。

定位屬性
很多情況下，你需要控制更多元素的位置，而且超過了浮動(dòng)所能提供的范圍，這個(gè)時(shí)候我們就需要發(fā)揮“position”屬性的作用。“position”屬性提供五個(gè)不同的屬性值，每種不同的方式可以給元素提供不同的位置。

Position static
元素都有position屬性，其默認(rèn)值是“static”，這也意味著，他們沒有也不接受位置屬性設(shè)置（top、right、bottom、left屬性值設(shè)置）。另外元素設(shè)置了position屬性，將會(huì)覆蓋元素的默認(rèn)值“static”。

在下面的演示中，所有的盒子都是靜態(tài)的，每個(gè)盒子都在相鄰盒子頂部，因?yàn)樗麄兌际菈K元素，而且沒有進(jìn)行浮動(dòng)設(shè)置。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div> </code>

CSS
<code>.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 80px;
width: 80px;
}</code>

效果

包含浮動(dòng)

Position relative
“relative”是“position”的另一個(gè)屬性值，他和“static”屬性值非常的相似。主要的區(qū)別是“relative”可以給元素設(shè)置位移（offset）“top、right、bottom和left”屬性。通過這些位移屬性設(shè)置可以給元素進(jìn)行精確的定位。

盒子位移屬性是如何工作？
盒子的位移屬性有四個(gè)“top、right、bottom和left”，用來指定元素的定位位置和方向。這些屬性只能在元素的“position”屬性設(shè)置了“relative、absolute和fixed”屬性值，才生效。
對(duì)于相對(duì)定位元素，這些屬性的設(shè)置讓元素從默認(rèn)位置移動(dòng)。例如，top設(shè)置一個(gè)值“20px”在一個(gè)相對(duì)定位的元素上，這個(gè)元素會(huì)在原來位置向下移動(dòng)“20px”。反之，“top”設(shè)置一個(gè)“-20px”，這個(gè)元素會(huì)在原來的位置向上移動(dòng)“20px”。
對(duì)于絕對(duì)定位和固定定位鮮紅，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對(duì)定位的元素設(shè)置一個(gè)“top”值為“20px”，將使絕對(duì)定位元素相對(duì)于其設(shè)置了相對(duì)定位的祖先元素頂部邊緣向下移動(dòng)“20px”，反之，如果設(shè)置一個(gè)“top”值為“-20px”，將使絕對(duì)定位元素相對(duì)于其設(shè)置了相對(duì)定位的祖先元素頂部邊緣向上移動(dòng)“20px”。（絕對(duì)定位的參考點(diǎn)是其祖先元素設(shè)置了“relative”或者“absolute”值）。

設(shè)置了位移屬性的相對(duì)定位元素，他在頁面中仍然是正常的、靜態(tài)的，仍屬于自然流。在這種情況下，其他元素不會(huì)占用相對(duì)定們?cè)禺?dāng)初的位置。此外，其他元素沒有進(jìn)行位置移動(dòng)時(shí)，相對(duì)定位元素可能會(huì)和其他元素重疊。

在下面的演示中，每個(gè)元素還是在另一個(gè)元素頂部，然后他們根據(jù)自己移位屬性，從默認(rèn)位置進(jìn)行移動(dòng)，由于他們移向方向不一樣，這些值使元素重疊在一起。當(dāng)元素設(shè)置了相對(duì)定時(shí)，周邊的元素也能看到相對(duì)定位元素的默認(rèn)位置。（也就是說，相對(duì)定位元素的默認(rèn)位置還是被元素自身占用，別的元素是無法占用的。也就是說相對(duì)定位元素的位移是相對(duì)于元素自身的邊緣進(jìn)行位移）。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div></code>

CSS
<code>.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 80px;
position: relative;
width: 80px;
}
.box-1 {
top: 20px;
}
.box-2 {
left: 40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}</code>

效果：

相對(duì)定位

事實(shí)上，一個(gè)相對(duì)定位元素同時(shí)設(shè)置了“top”和“bottom”位移屬性值，實(shí)際上“top”優(yōu)先級(jí)高于“bottom”。然而，一個(gè)相對(duì)定位元素同時(shí)設(shè)置了“l(fā)eft”和“right”位移屬性，他們的優(yōu)先級(jí)取決于頁面使用的是哪種語言，例如，如果你的頁面是英文頁面，那么“l(fā)eft”位移屬性優(yōu)先級(jí)高，如果你的頁面是阿拉伯語，那么“right”的位移屬性優(yōu)先級(jí)高。

Position absolute
絕對(duì)定位元素也具有盒子位移屬性，然而，絕對(duì)定位元素會(huì)脫離文檔流。絕對(duì)定位元素直接從文檔流中移出，絕對(duì)定位元素的位置直接和父容器是否設(shè)置了相對(duì)定位（絕對(duì)定位）有直接關(guān)系。絕對(duì)定位元素需要至少一個(gè)祖先元素設(shè)置了相對(duì)定位（絕對(duì)定位），不然元素定位會(huì)相對(duì)于頁面的主體進(jìn)行定位。

使用絕對(duì)定位的元素可以指定垂直和水平的位移屬性，使絕對(duì)定位元素相對(duì)于設(shè)置了相對(duì)定位的祖先元素邊緣進(jìn)行移位。例如，一個(gè)絕對(duì)定位的元素設(shè)置了“top”值為“50px”和一個(gè)“right”值為“100px”,絕對(duì)定位元素會(huì)相對(duì)于其設(shè)置了相對(duì)定位的父元素的頂邊向下移動(dòng)50px;向左移動(dòng)100px。

然而，使用了絕對(duì)定位的元素并沒有進(jìn)行任何盒子位移屬性設(shè)置，那么絕對(duì)定位元素的頂部和左部會(huì)和設(shè)置了相對(duì)定位的父元素的頂邊和左邊重合。如果設(shè)置了一個(gè)盒子位移屬性，比如說“top”，那么絕對(duì)定位元素垂直方向會(huì)進(jìn)行移動(dòng)，而水平位置默認(rèn)還是左邊對(duì)齊。
在下面的演示中，你可以看到所有的盒子都相對(duì)于div的父元素進(jìn)行絕對(duì)定位，每個(gè)元素都從特定的面使用定位值進(jìn)行移動(dòng)，而且使用了負(fù)值的，元素移動(dòng)到盒子的外面。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div></code>

CSS
<code>.box-set {
background: #e8eae9;
height: 200px;
position: relative;
}
.box {
background: #8ec63f;
height: 80px;
position: absolute;
width: 80px;
}
.box-1 {
top: 6%;
left: 2%;
}
.box-2 {
top: 0;
right: -40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
.box-4 {
bottom: 0;
}</code>

效果

絕對(duì)定位

當(dāng)一個(gè)絕對(duì)定位的元素有固定的高度和寬度，并且盒子位移同時(shí)設(shè)置了“top”和“bottom”時(shí)，“top”更具優(yōu)先組，另外和相對(duì)定位元素一樣，當(dāng)同時(shí)設(shè)置了“l(fā)eft”和“right”時(shí)，優(yōu)先級(jí)取決于他的頁面使用的語言。

當(dāng)一個(gè)絕對(duì)定位的元素沒有明確指定高度和寬度，同時(shí)使用盒子位移的“top”和“bottom”屬性時(shí)，會(huì)使整個(gè)元素的高度跨越整個(gè)容器。同樣的，當(dāng)這個(gè)元素同時(shí)使用位移“l(fā)eft”和“right”屬性值，會(huì)使整個(gè)元素的寬度跨越整個(gè)容器。如果同時(shí)使用位移四個(gè)屬性，可以指定一個(gè)寬度和高度顯示元素。（這個(gè)時(shí)候絕對(duì)定位元素的寬度和高度都是100%。）

Position fixed
固定定位和絕對(duì)定位很類似，但是他定位是相對(duì)于瀏覽器窗口，并且不會(huì)隨滾動(dòng)條進(jìn)行滾動(dòng)。也就是說，不管用戶停留在頁面那個(gè)地方，固定定位的元素將始終停留在頁面的一個(gè)地方?！皃osition”屬性值中，僅有“fixed”屬性值不能在IE6瀏覽器下運(yùn)行，如果你想在IE6正常使用固定定位，那么你就需要為他寫一些Hacks。
固定定位元素的盒子位移屬性的使用和絕對(duì)定位的一樣。
保持前面盒子移位，可以看到盒子固定定位是相對(duì)于瀏覽器窗口而不是設(shè)置了相對(duì)定位的父元素。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div></code>

CSS
<code>.box {
background: #8ec63f;
height: 80px;
position: fixed;
width: 80px;
}
.box-1 {
top: 6%;
left: 2%;
}
.box-2 {
top: 0;
right: -40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
.box-4 {
bottom: 0;
}</code>

效果

絕對(duì)定位

固定頁頭和頁腳
固定定位最常見的一種用途就是在頁面中創(chuàng)建一個(gè)固定頭部、或者腳部、或者固定頁面的一個(gè)側(cè)面。就算是用戶移動(dòng)瀏覽器的滾動(dòng)條，還是固定在頁現(xiàn)與用戶交流。
下面的示例代碼能實(shí)現(xiàn)。注意如何設(shè)置“l(fā)eft”和“right”兩個(gè)盒子位移，這使得“頁腳”跨越了頁面的整個(gè)寬度，而不需使用margin、border和padding來破壞盒模形就做了收縮自如。

HTML
<code>< footer >Fixed Footer </footer></code>

CSS
<code>footer {
bottom: 0;
left: 0;
position: fixed;
right: 0;
}</code>

固定定位

z-index屬性
通常都認(rèn)為Web頁面是二維頁面，顯示的元素都在X軸和Y軸上。當(dāng)你的元素有定位時(shí)，他們有時(shí)候會(huì)放置在另一個(gè)元素的頂部。要改變這些元素是一個(gè) 怎么樣的層疊順序，要知道z軸，z軸是用“z-index”屬性來控制的。

一般來說，在DOM中，元素出現(xiàn)的時(shí)候就放置在z軸上。在Dom中，元素在頂部的要低于底部的。改變這種層疊順序可以直接使用“z-index”來控制。元素的“z-index”值越高將會(huì)出現(xiàn)在越上面，不管元素在Dom哪個(gè)位置上。

給元素設(shè)置“z-index”屬性，首先要在這個(gè)元素上設(shè)置了“position”屬性值為“relatvie”、“absolute”或者“fixed”之一。同樣的，你要使用盒子位移屬性，你也要先確認(rèn)元素設(shè)置了“positions”屬性值為“relative”、“absolute”或者“fixed”之一。
在下面的登例子中，如果每個(gè)盒子都不設(shè)置“z-index”，那么第一個(gè)box在第二個(gè)下面，第二個(gè)在第三個(gè)下面，第三個(gè)在第四個(gè)下面。如果在盒子中指定“z-index”的值，第二個(gè)盒子在第一個(gè)和第三個(gè)上面，第三個(gè)盒子在第四個(gè)上面。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div></code>

CSS
<code>.box-set {
background: #e8eae9;
height: 160px;
position: relative;
}
.box {
background: #8ec63f;
border: 3px solid #f7941d;
position: absolute;
}
.box-1 {
left: 10px;
top: 10px;
}
.box-2 {
bottom: 10px;
left: 70px;
z-index: 3;
}
.box-3 {
left: 130px;
top: 10px;
z-index: 2;
}
.box-4 {
bottom: 10px;
left: 190px;
z-index: 1;
}</code>

不設(shè)置z-index效果

固定定位

設(shè)置z-index效果
固定定位

本文由大漠根據(jù)Shay Howe的《An Adavnced Guide to HTML & CSS》第二課《Detailed Positioning》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning，以及作者相關(guān)信息
作者：Shay Howe
譯者：大漠

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,090評(píng)論 1贊 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表，主要用...
    寥寥十一閱讀 2,037評(píng)論 0贊 6
  • 一，浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響? 浮動(dòng)模型是一種可視化格式模型，浮動(dòng)...
    DeeJay_Y閱讀 992評(píng)論 0贊 4
  • 穿著大襠褲，裝一回胖了的阿凡提，或者騎著鳥，裝一回漂了白的阿凡達(dá)。就騎著驢，看著風(fēng)景，救或不救落水老太太，...
    馬冬梅的向日葵閱讀 358評(píng)論 0贊 0
  • 昨天臨睡前，看到一位90后下屬在QQ上發(fā)來的信息，她要這個(gè)月的二十號(hào)之前辦好離職手續(xù)，問我要離職申請(qǐng)表。 ...
    上孟默蒹閱讀 402評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容