萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> dreamweaver教程 >> Dreamweaver教程-CSS定位(positon)教程

Dreamweaver教程-CSS定位(positon)教程

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

copyright © 萬盛學電腦網 all rights reserved