首页 > 代码库 > HTML CSS——position学习终结者(二)

HTML CSS——position学习终结者(二)

2024-07-08 09:11:19   230人阅读

        在博客《HTML CSS——position学习终结者(一)》中我们认识到如果某一absolute作用的元素的父对象(或曾祖父，只要是父级对象)设置了position属性且position的属性值为absolute、relative或者fixed，那么这个子元素会参照离它（指子元素）最近的且position的属性值为absolute、relative或者fixed的父元素进行定位，子元素的定位点为父元素的左上角，学习过padding的人可能会这样想：这个时候如果父元素设置了padding样式，那absolute作用的子元素应该从padding处开始定位吧？呵呵呵，这种认识对吗，先参见下面的例子：

        代码01：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body{
				margin:0px;
				background-color:gray;
			}
			
			.parent{
				position:absolute;
				margin-left:50px;
				width:300px;
				height:300px;
				background-color:yellow;
			}
			
			.son1{
				position:absolute;
				left:150px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son1">son1</div>
			<div class="son2">son2</div>
		</div>
	</body>
</html>

图01

        说明：上面的son1父元素没有使用padding样式，这时son1定位点为父元素的左上角；

        代码02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<style type="text/css">
			body{
				margin:0px;
				background-color:gray;
			}
			
			.parent{
				position:absolute;
				margin-left:50px;
				padding-left:50px;
				width:300px;
				height:300px;
				background-color:yellow;
			}
			
			.son1{
				position:absolute;
				left:150px;
				width:50px;
				height:50px;
				background-color:green;
			}
			
			.son2{
				width:50px;
				height:50px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="son1">son1</div>
			<div class="son2">son2</div>
		</div>
	</body>
</html>

图02

        说明：上面的son1父元素添加了样式padding-left并设置其值为50px；

        总结：对比图01和图02我们会发现这种情况下son1并没有受padding-left的影响，据此我们可以认定父元素纵使设置了padding样式，absolute作用的子元素也是从父元素的左上角开始定位。

        【0分下载演示资源】

         【参见另一篇博客——HTML CSS——position学习终结者(一)】


联系
我们