本系列博客汇总在这里：JavaWeb_CSS 汇总

一、绝对定位
  1. 设置绝对定位的元素从文档流中完全删除，以浏览器的左上角为相对位置，设置水平位置和垂直的位置。
  2. position: absolute;
    设置绝对定位， 当前的 div 脱离文档流，宽度变为 0。
  3. left: 20px;
    距离浏览器的左边框 20px。
  4. top: 80px;
    距离浏览器的上边框 20px，right：距离右边框，bottom：距离下边框 。

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">
		<title> www.weiyuxuan.com </title>
	</head>	
	<style type="text/css">	
		body
		{
			margin: 10px;
			font-size: 12px;
			font-family: Arial;
		}		
		.outside
		{
			width: 500px;
			height: 200px;
			background-color: #a9d6ff;
			border: 1px dashed black;
		}		
		.inside
		{
			padding: 10px;
			background-color: #fffcd3;
			border: 1px dashed black;
			width: 100px;
			position: absolute;
			left: 20px;
			top: 80px;
		}		
	</style>	
	<h1> 定位  </h1>	
	<hr>	
	<body>	
		<div class="outside">
			<div class="inside"> 绝对定位 </div>
		</div>	
	</body>	
</html>

JavaWeb_CSS（12）_定位_绝对定位_CSS

二、CSS 绝对定位对宽度的影响

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">
		<title> www.weiyuxuan.com </title>
	</head>	
	<style type="text/css">	
		body
		{
			margin: 10px;
			font-size: 12px;
			font-family: Arial;
		}		
		.outside
		{
			width: 500px;
			height: 200px;
			background-color: #a9d6ff;
			border: 1px dashed black;
		}		
		.inside
		{
			padding: 10px;
			background-color: #fffcd3;
			border: 1px dashed black;
			width: 100px;
			position: absolute;
			
			left: 20px;
			top: 80px;
			
			right:20px;
			bottom: 80px;
		}		
	</style>	
	<h1> 定位  </h1>	
	<hr>	
	<body>	
		<div class="outside">
			<div class="inside"> 绝对定位 </div>
		</div>	
	</body>	
</html>

JavaWeb_CSS（12）_定位_绝对定位_CSS_02

如有错误，欢迎指正！