div+定位

http://www.webw3c.org/divcss-tech/divcss-cengshuxingdingweiyuanli/

不錯的一篇總結性文章！

一、概述
二、position屬性
三、top,right,bottom,left屬性
四、float屬性
五、z-index屬性

一、概述

本文以標籤“<div></div>”爲例進行講解，部分內容同樣適用於部分其它塊(block)標籤元素。
本文中的範例通過測試的瀏覽器爲IE6、IE7、Firefox2。
<div> 標籤可以把文檔分割爲獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。

我們在平時的網頁製作中，已經或多或少的接觸過CSS樣式表中的“position(位置)”屬性，其實這基本算是定位根源所在了。當然了，這並不是全部，如果再加上“float”、“z-index”等屬性，我們的層定位將會更加完美。下面我們將一一講解：

二、position屬性

position屬性有五個取值，分別爲：static, relative, absolute, fixed, inherit, 其中“static”爲默認值。

·static

該值爲position的默認值，可以省略不寫，當position取值爲static或者沒有設置position屬性的時候，div的顯示方式爲按文本流的順序從上至下，或者從左到右順序顯示。
例如：

層一

層二

源代碼如下：

<div class="style">層一</div>
<div class="style">層二</div>
.style {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
margin-bottom:5px;
}

·relative

相對定位，相對於什麼位置呢？官方手冊中是這樣說的：“Relative position that is offset from theinitial normal position in theflow.”可以簡單的如此解釋：偏移文本流中最初的位置。最初位置也就是當position取值爲static時的位置，也就是說這裏的相對定位是相對於它在正常情況下的默認位置的。

例如 div[position="relative"] 設置了top 、left，那麼div的位置會根據“原來文檔流的位置發生偏移，且不是相對整個窗口的top,left”,其後面的元素位置不變。

left,top 是相對自身文檔流位置發生偏移，而不是父div的left,top。例如：父div 有兩個子divA,divB ,divB文檔流位置就在divA位置後面，divA的top設置成0px就可以與父窗口位置對齊,divB的top設置成0px則不行，因爲divB相對自身文檔流位置要往上面的父div 對齊的話，就是一個向上的負座標。

下圖列出了偏移產生前後的位置關係：

完整的代碼如下：
偏移前：

偏移後：

結合以上圖示和CSS樣式表可以得出以下兩個結論：

設置了position:relative而不設置left,top等屬性的時候，層顯示的位置和不設置position屬性或者position值取static時一樣。
當一個層設置了position:relative，而且使得層位置產生相對偏移時，並不影響文本流中接下來的其他層的位置。

另外我們還可以做如下嘗試，當層二對應的css樣式表“style2”不設置position:relative時，會發現層一偏移後重疊時，層一覆蓋了層二。而不是我們圖示上層二覆蓋了層一。
原因時這樣的，當設置了position:relative，層的層疊級別高於默認的文本流級別。當然了，如果都設置了position:relative，同等級別下將會按照文本流的順序層疊顯示。

·absolute

絕對定位，回憶一下，當我們設置position的值爲static或者relative時，層依然存在於文本流中，也就是不管位置是否偏移，文本流中依然爲它保留了該有的位置。但當層設置了position:absolute併產生偏移（設置了top,left等值）時，該層將完全從文本流中脫離( 後面的元素在文檔流中位置不受其影響)，進而以該層所在的父容器的座標原點爲參考點進行偏移，可以這理解，該層已經和同級容器中的其它元素脫離了關係，也不會對其它元素產生人和影響（當它不存在！）。
注意：如果父容器沒有設置position屬性或position值爲static時，將以body的座標原點爲參考。

下面我們以三個圖示來分別說明。

上面三個頁面效果的css樣式表如下：

頁面一：

頁面二：

頁面三：

通過以上的範例和理論說明，我們應該從原理上理解了absolute定位。這裏補上官方對於absolute的解釋：
“Taken out of the flow and offset according to the containing block. ”

截至這裏，希望各位可以稍作休息，嘗試修改上面範例中的css屬性，做到舉一反三，充分理解。

·fixed

固定定位，它的效果類似常見的浮動廣告，無論如何拖動瀏覽器的滾動條，層始終懸浮在瀏覽器的某個位置。由於該屬性只能被Firefox很好的支持，雖然可以在通過其它設置在IE6.0中得到同樣的效果，但由於本文篇幅原因，不繼續對本屬性繼續作解釋。下面的經典案例中將會有相關解釋。

·inherit

繼承，和其它屬性的繼承一樣。在這裏爲繼承父元素中的position值。

三、top,right,bottom,left屬性

這四個屬性中的top和left屬性之前有使用過（right和bottom用法也一樣），大致功能我們基本已經清楚了，這裏再簡單介紹一下。

這四個屬性在設置了position屬性，並且值不爲static時生效。當position取值relative時，偏離文本流初始位置；當position取值absolute時，以父容器對應的初始點爲原點偏移，如果父容器沒有設置positon或者position取值static時，以body對應的座標點爲參考點偏移。 top,right,bottom,left屬性的取值除了具體的數值外，還可以是百分比、繼承、或者auto（默認值）。

auto的設置：當div[position="absolute"]時，width:auto;根據內容自動設置寬度，當div[position="relative"]時,auto爲父div寬度，如果沒有父div，則爲窗口寬度

四、float屬性

取值包括inherit，left，right以及默認值none，該屬性用於控制文本流的顯示方向。需要注意的是如果設置了該屬性並取值爲 left或right後，會影響到該流後面的其它盒子模型。可以通過設置“clear:both;”清除該屬性設置。例如：

層一

層二

層三

源代碼如下：

<div class="style1">層一</div>
<div class="style1">層二</div>
<div class="style2">層三</div>
.style1 {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
    float:left;
    margin-bottom:5px;
}
.style2 {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
    clear:both;
    margin-bottom:5px;
}

需要注意的是由於float控制的是文本流方向，當爲層設置了“position:absolute;”後，float將不再有效，因爲absolute的層已經脫離該文本流。
auto的設置：當div[position="absolute"]時，width:auto;根據內容自動設置寬度，當div[position="relative"]時,auto爲父div寬度，如果沒有父div，則爲窗口寬度
float 控制文本流的顯示方向，當一個父div中的子div 都是float時，父div高度，和寬度是不會根據內容而適應的。
div爲float時，它的下一個非float的div 的margin相對於float的div是無效的，只有都是float纔有效；因爲影響下一個元素的位置，所以div爲float的margin可以影響下一個div的位置，不管他是否爲float

float影響下一個文檔流的顯示方向，從上至下，或從左至右。從左至右這種情況是指：如果float的div設置的高度很高，那麼下一個元素的位置受它高度的影響。
例：
<div style="background-color:#ff0000; float:left; width:100px; height:50px;">sss</div>
ssssssssssssss<br />sssssssssssssssss<br/> ssssssssssssss
如果不想受float 的影響，添加<dir style="clear: both;"></dir>就可以了，接下來的元素就是換行顯示。

五、z-index屬性

該屬性在設置了position並取值爲“absolute”或“relative”時有效，用於控制層在Z- 軸上的排列順序，值爲整數（由於不同瀏覽器的兼容性的區別，最好是正整數），取值越大層越在最上面。

Code:
relative.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
html{
	font-size: 12px;
}
body{
	//color: #666666;
}
div{
	border: 1px solid #666666;
}
.style {
	border: 1px solid #999900;
	background-color: #CCFF99;
	width: 80px;
	height: 80px;
	margin-bottom: 5px;
}
</style>
</head>
<body>
							<!-- position默認爲 static -->
<div class="style" style="position: static;">層一</div>
<div class="style">層二</div>

							<!-- 相對位 relative-->

偏移前：
<style type="text/css">
.style1 {
	position: relative;
	height: 80px;
	width: 80px;
	margin-bottom: 10px;
	border: 1px solid #000;
	background-color: #acd373;
}

.style2 {
	position: relative;
	height: 80px;
	width: 80px;
	border: 1px solid #000;
	background-color: #f26c4f;
}
</style>
<div class="style1">層一</div>
<div class="style2">層二</div>

偏移後：
<style type="text/css">
.style3 {
	position: relative;
	left: 30px;
	top: 30px;
	height: 80px;
	width: 80px;
	margin-bottom: 10px;
	border: 1px solid #000;
	background-color: #acd373;
}

.style4 {
	position: relative;
	height: 80px;
	width: 80px;
	border: 1px solid #000;
	background-color: #f26c4f;
}
.parent_ {
	position: relative;
	border: 1px solid #000;
	background-color: #f26c4f;
	left: 5px;
}
</style>
<div class="parent_">父div中的文字,影響到子div相對父窗口定位,<B>所以div中的文字一般都放到子div來顯示?</B>
<div class="style3">偏移後:層一(相對父窗體偏移)</div>
<div class="style4">偏移後:層二(我不管我跟父容器混的～～)</div>
<div style="float: right;" >floatAA（飄過～～）</div>
<div>我被float影響了！</div>
<div style="float: right;" >floatBB（繼續飄過～～）</div>
<div style="clear: both;">我纔不管float！</div>
<div>完全無視，float只能影響下一個元素，我受我上一個div的影響</div>
<div style="position: relative; top: -172px ;left: 0px">看到沒有？文字放到div裏面了</div>
</div>
<div style="background-color:blue;">我是下個一文件檔流</div>
</body>
</html>

code2:
absolute.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<style type="text/css">
.style1 {
	position: relative;
	height: 150px;
	width: 150px;
	border: 1px solid #000;
	background-color: #a2d39c;
}

.style2 {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 50px;
	width: 50px;
	border: 1px solid #000;
	background-color: #f68e56;
}

.style3 {
	height: 50px;
	width: 50px;
	border: 1px solid #000;
	background-color: #00adef;
}
</style>
<div class="style1">
	<div class="style2"></div>
	<div class="style3"></div>
</div>

</body>
</html>

1024aaa

發佈了17 篇原創文章 · 獲贊 4 · 訪問量 4萬+

私信關注

一、概述

二、position屬性

·static

·relative

·absolute

·fixed

·inherit

三、top,right,bottom,left屬性

四、float屬性

五、z-index屬性

985 碩士程序員，空窗 4 個月沒有 Offer！

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

tomcat 識別 web 工程

解析XML文件的四種方法

ext4.0

ext2.0 與3.0寫法的差異

combo 添加listeners，使用 initComponent、constructor 的區別

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結