css中position absolute和relative

最新推荐文章于 2023-09-09 15:14:31 发布

iteye_2466

最新推荐文章于 2023-09-09 15:14:31 发布

阅读量84

点赞数

分类专栏： DIV+CSS 文章标签： CSS JavaScript 浏览器 XHTML HTML ViewUI

DIV+CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

搞后台的，很少搞div+css,今天看了一下phpcms的后台登陆界面，做的很简洁，看了代码，用了下相对定位和绝对定位

自己写的html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
	#testA{
		width:500px;
		height:500px;
		margin:10px auto;
		background:#CCC;
		text-align:center;
	}
	#testB{
		width:300px;
		height:300px;
		background:#0F3;
		position:absolute;
		bottom:0px;
		left:100px;
	}
	#testC{
		width:600px;
		height:600px;
		background:#F39;
		position:relative;
		}
</style>
</head>

<body>
<div id="testC">
<div id="testA">
<div id="testB"></div>
</div>
</div>
</body>
</html>

如果有两个DIV〔A与B〕
并且B被嵌套与A中
现在你想达到的郊果是让B在任何情况下的垂直属性都为“居底”（与A底对齐）
那么你可能会想到用bottom:0px这样的作法，前提当然是position要设为absolut
但是你会发现，如果这样设的话，得到的效果是B对齐到了浏览器的最下边
这时就要用到position:relative了。
在A中加上一句position:relative，这样就定义了 A内部元素的position:absolute是相对于A自身的，而不是浏览器！所以，B中的bottom:0px就会在执行时去找它的父级元素中有没有position:relatavie的，如果没有，它会继续向它更上一层去找