CSS入门教程-定位(positon)

发布时间:2019-09-25编辑:脚本学堂
CSS入门教程-定位(positon)

CSS定位在网页布局中起着决定性的作用。

定位

CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局。本节就介绍一些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的位置。

尽管定位的语法非常简单,但是它的功能强大和实用是不容置疑的。
合理地使用定位和盒子可以实现网页布局等等。