Dreamweaver教程-CSS定位(positon)

2022-05-05发布者：ylm大小：下载：0

文件大小:

软件介绍

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位置来定位的的。如果有如下代码：

若给strong元素设置绝对定位，那么坐标原点将会是父元素p的位置。

发表评论(共0条评论)

版权声明：

1 本站所有资源（含游戏）均是软件作者、开发商投稿，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！

2 本站将不对任何资源负法律责任，所有资源请在下载后24小时内删除。

3 若有关在线投稿、无法下载等问题，请与本站客服人员联系。

4 如侵犯了您的版权、商标等，请立刻联系我们并具体说明情况后，本站将尽快处理删除，联系QQ:2499894784

热门软件

最近更新