Dreamweaver入门教程之CSS定位
作者:本站整理 时间:2015-02-16
网页设计地再漂亮，如果没有合理地布局跟定位就无法让网友引起共鸣。因此，在网页设计过程中，怎样合理地定位是很重要的，接下来我们就来学习Dreamweaver入门教程中CSS定位的内容。
1.相对定位(relative)
相对定位是指相对它本来应该处的位置所做的移动。
……
<style type="text/css">
.dingwei{
position:relative;
left:50px;
}
</style>
……
<p>我是一段正常的文本</p>
<p class="dingwei">我本来应该在它的正下方，
可是relative相对定位让我在正常位置的基础上向右移动了50个像素。</p>
</body>
</html>
2.绝对定位(absolute)
绝对定位非常好理解，你指定元素出现的坐标(x,y)，然后它就准确无误地显示在那里。
<!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>s
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
p{
font-size:24px;
font-weight:bold;
}
.dingwei1{
position:absolute;
top:35px;
left:35px;
color:#FF0000
}
.dingwei2{
position:absolute;
left:50px;
top:50px;
color:#0000FF;
}
</style>
</head>
<body>
<p class="dingwei1">CSS</p>
<p class="dingwei2">绝对定位</p>
</body>
</html>
定位中使用的left属性表示元素距离左侧的距离，而top属性表示距离上方的位置。如果用坐标系来理解的话left就是横坐标x，而top就是纵坐标y。
绝对定位其实也是相对定位
没错，绝对定位会按照我们给定的坐标x，y来准确地定位你一个元素。但是问题在于，坐标系的原点在哪里呢？答案就是父元素。
上例中，class为"dingwei2"的元素设置为绝对定位，它的父元素为body，所以它其实是相对body位置来定位的的。如果有如下代码：
<p>
段落正文
<strong>强调文字</strong>
<p>
若给strong元素设置绝对定位，那么坐标原点将会是父元素p的位置。
相关文章
相关推荐
-
墨墨背单词电脑版 v3.1.5
-
嘟嘟语音DuDu 3.2.103 官方版(语音聊天）
-
百度输入法官方版
-
悟空TV直播助手官方版 v1.0.1
-
Renee数据恢复软件 V2014.5.7.10(数据备份恢复软件
-
应用宝套装版 V5.6.1.5116
-
小白一键重装系统工具官方安装版 V12.6.48.2130
-
Hot Virtual Keyboard 8.3.8.0 官方中文版下载(虚拟键盘工具)
-
拍大师（屏幕/游戏录像软件）官方版
-
DesktopOK绿色版 V4.42.0
-
快压zip官方版
-
几米浏览器 V1.0.0.5官方版（双内核浏览器）
-
数据库恢复工具 v6.0 汉化版
-
千牛pc版(淘宝店铺管理工具)
-
腾讯QQ8.3官方版 v8.3.18038
-
Premiere Pro CC 2015官方版 v9
