上传新文件

a9ea35e1 · Edward_555 · ed3fbeda · a9ea35e1
隐藏空白更改
内联并排

Showing with 103 addition and 0 deletion

index_absolute.html index_absolute.html +103 -0

未找到文件。
--- a/index_absolute.html
+++ b/index_absolute.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>Hello, absolute!</title>
+	<style>
+	body{
+		width:50%;
+	}
+	.son6{
+		position: absolute;
+		top: 20px;
+		left: 70px;
+		width: 100%;
+		height:30px;
+		background-color:#ff5500;
+	}
+	.son7{
+		width: 100%;
+		height:30px;
+		background-color:#ff5555;
+	}
+	
+	/*这个parent虽然设置了absolute，但是没有设置top，left等，所以依然在当前位置，如果添加了top，left，那该parent就会以body进行定位*/
+	.parent1{
+		position: absolute;
+		width:100%;
+	}
+	/*这个son设置了absoult，如果他的父元素有absolute，或者relative，name他就会以该父元素相对位置定位，否则以body定位*/
+	.son8{
+		position: absolute;
+		top: 10px;
+		left: 40px;
+		width: 100%;
+		height:30px;
+		background-color:#665660;
+	}
+	.son9{
+		width: 100%;
+		height:30px;
+		background-color:#663663;
+	}
+	/*这个parent设置了absolute，设置top，left等，所以他以body进行定位*/
+	.parent2{
+		position: absolute;
+		top: 80px;
+		left: 40px;
+		width:100%;
+	}
+	/*这个son设置了absoult，他的父元素有absolute，或者relative，他就会以该父元素相对位置定位*/
+	.son10{
+		position: absolute;
+		top: 10px;
+		left: 40px;
+		width: 100%;
+		height:30px;
+		background-color:#086734;
+	}
+	div{
+		border:1px solid #888;
+	}
+	
+	
+</style>
+  </head>
+  <body>
+	<div >
+		<p>我只是个占位元素1</p>
+		<p>我只是个占位元素2</p>
+		<p>我只是个占位元素3</p>
+	</div>
+	<div >
+		<div class="son6">son6</div>
+		<div class="son7">son7</div>
+	</div>
+	
+	<div class="parent1">
+		<div class="son8">son8</div>
+		<div class="son9">son9</div>
+	</div>
+	
+	<div class="parent2">
+		<div class="son10">son10</div>
+	</div>
+	
+	<div >
+		<p>absolute</p>
+		absolute的相对偏移对象分两种情况，1，父级或祖父级等也有absolute或者relative属性，2，任意层父级无前述属性。<br><br>
+		1.父级有absolute或者relative属性。<br><br>
+		当父级有该属性，则相对偏移位置为父元素偏移后所在位置为基准进行偏移。<br><br>
+		son8父级有该属性，但父元素未设置偏移，因此父级仍是正常流布局，子元素以父级元素为基准进行偏移<br><br>
+		son10父级有该属性，父元素设置偏移，因此父级相对body偏移，子元素以父级元素为基准进行偏移<br><br>
+		2，任意层父级无absolute或者relative属性。<br><br>
+		当无父级无该属性，则相对偏移位置以body为基准进行偏移。<br><br>
+		son6父级无该属性，因此son6以body为基准偏移。<br><br>
+		***同一个块内的元素，son6添加了absolute，son6发生偏移，son6实现了漂浮，失去了流布局位置，看起来像不受父元素约束，此时son7会接替son6的位置出现在正常的流中。
+	</div>
+	
+  </body>
+</html>
\ No newline at end of file