CSS定位详解-优快云博客

本文深入解析了CSS中的四种定位方式：静态定位、相对定位、绝对定位和固定定位。通过实例代码详细说明了每种定位方式的特点及应用，帮助读者理解如何在网页布局中正确使用这些定位属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、层定位

普通流、浮动和绝对定位

position : static | absolute | fixed | relative

position:satic 就是普通流(普通流中的元素的位置由元素在 HTML 中的位置决定。)

position:relative就是相对定位(相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留)

比如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="guanqing" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<style type="text/css">
<!--


#a {
    width:200px;
	height:500px;
	background:red;
	left:10px;
	top:20px;
	position:relative;
}

#b {
	width:20px;
	height:50px;
	background:green;
}

-->
</style>
<body>

<div id="b"></div>
<div id="a">
</div>
</body>
<html>

效果：a层相对于b层，相对于上面的距离是20px;相对于B的左边10px;

position:absolute 表示绝对定位，将对象从文档流中拖出，也就是浮在其他的层之上。如果父的层有属性position:relative，该层浮在该父层之上，left,top的值也是相对于父层，没有则依据 body 对象。

代码：

  <meta name="description" content="" />
 </head>
<style type="text/css">
<!--
#downloadDiv{
	padding:5px;
	margin:2px;
	width:160px;
	border:1px solid #ccc;
	background:#f1f1f1;
	}
#downloadDiv{
   width:81px;
   line-height: 24px;
   left:30px;
   top:30px;
   position:absolute;
}
#a {
    width:200px;
	height:180px;
	background:red;
	
/*	position:relative;*/
}

-->
</style>
<body>
<div id="a">
<div id="downloadDiv">下载</div> 
</div>
</body>
<html>