Dreamweaver教程-CSS定位(positon)

时间：2014-08-14 17:59
来源：下载吧
编辑：xfront

Adobe Dreamweaver CS6

AdobeDreamweaverCS6简体中文优化版由官方简
软件大小：278 MB 详情
Adobe Dreamweaver CS5

AdobeDreamweaverCS5软件使设计人员和开发人
软件大小：406 MB 详情

DIV+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的位置。