萬盛學電腦網 >> 網頁制作 >> 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的位置。
dreamweaver教程排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved