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