css的position定位

huang303513 · huang303513 · commit 1ace386901ae · 2016-11-04T19:50:07.000+08:00
diff --git a/html&css练习/css练习之position.html b/html&css练习/css练习之position.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>position布局练习</title>
+	<style type="text/css">
+		h2.pos_left{
+			position: relative;
+			left: -20px;
+		}
+		h2.pos_right{
+			position: relative;
+			left: 50px;
+		}
+
+		h2.pos_abs{
+			position: absolute;
+			left: 100px;
+			top: 800px;
+		}
+
+		p.one
+		{
+			position:fixed;
+			left:5px;
+			top:355px;
+		}
+		p.two
+		{
+			position:fixed;
+			top:355px;
+			right:5px;
+		}
+	</style>
+</head>
+<body>
+<div>
+	<h2>relative这是正常位置的标题,相对定位会按照元素的原始位置对该元素进行移动。</h2>
+	<h2 class="pos_left">relative这个标题相对于其他正常位置的偏移</h2>
+	<h2 class="pos_right">relative这个标题相对于其他正常位置的偏移</h2>
+	<hr>
+</div>
+<div>
+	<h2 class="pos_abs">这是带有绝对定位的标题</h2>
+	<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
+	<hr>
+</div>
+<div>
+	<p class="one">一些文本。</p>
+	<p class="two">更多的文本。</p>
+</div>
+</body>
+</html>
diff --git a/html&css练习/css练习之对齐.html b/html&css练习/css练习之对齐.html
@@ -25,10 +25,10 @@
 			width: 300px;
 			background-color: #b0e0e6;
 		}
-		.floatright{
-			float: right;
-			width: 300px;
-			background-color: #b0e0e6;
+		.floatleft{
+			float: left;
+			width: 400px;
+			background-color: #bff0e6;
 		}
 	</style>
 </head>
@@ -44,8 +44,8 @@
 			<p><b>注释：</b>当使用 position 属性进行对齐时，请始终包含 !DOCTYPE 声明！如果省略，则会在 IE 浏览器中产生奇怪的结果。</p>
 		</div>
 	</div>
-	<div class="floatright">
-		<p>这是一个段落，靠右对齐。是通过flaot:right实现</p>
+	<div class="floatleft">
+		<p>这是一个段落，靠左对齐。是通过flaot:left实现</p>
 	</div>
 </body>
 </html>
