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的位置。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
