css样式：position中相对与绝对定位

最新推荐文章于 2024-11-11 23:26:32 发布

weixin_30562507

最新推荐文章于 2024-11-11 23:26:32 发布

阅读量98

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/huyn/p/6224238.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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div {
width:300px;
height:300px;
}
div:nth-child(1){
position:relative;
top:20px;
left:20px;
background-color:red;
font-size:40px;
text-align:center;
line-height:300px;
}
div:nth-child(2){
background-color:blue;
font-size:40px;
text-align:center;
line-height:300px;
}
div:nth-child(3){
font-size:40px;
text-align:center;
background-color:green;
line-height:300px;
}
</style>
</head>
<body>
<div>A</div>
<div>B</div>
<div>C</div>
</body>
</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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div {
width:300px;
height:300px;
}
div:nth-child(1){
position:absolute;
top:20px;
left:20px;
background-color:red;
font-size:40px;
text-align:center;
line-height:300px;
}
div:nth-child(2){
background-color:blue;
font-size:40px;
text-align:center;
line-height:300px;