Dreamweaver教程-CSS定位(positon)

2022-05-05發(fā)布者：ylm大?。?/span> 下載：0

文件大小:

軟件介紹

1.相對定位(relative)

相對定位是指相對它本來應(yīng)該處的位置所做的移動。

……
<style type="text/css">
.dingwei{
position:relative;
left:50px;
}
</style>
……
<p>我是一段正常的文本</p>
<p class="dingwei">我本來應(yīng)該在它的正下方，
可是relative相對定位讓我在正常位置的基礎(chǔ)上向右移動了50個像素。</p>
</body>
</html>

2.絕對定位(absolute)

絕對定位非常好理解，你指定元素出現(xiàn)的坐標(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屬性表示元素距離左側(cè)的距離，而top屬性表示距離上方的位置。如果用坐標系來理解的話left就是橫坐標x，而top就是縱坐標y。

絕對定位其實也是相對定位

沒錯，絕對定位會按照我們給定的坐標x，y來準確地定位你一個元素。但是問題在于，坐標系的原點在哪里呢？答案就是父元素。

上例中，class為"dingwei2"的元素設(shè)置為絕對定位，它的父元素為body，所以它其實是相對body位置來定位的的。如果有如下代碼：

若給strong元素設(shè)置絕對定位，那么坐標原點將會是父元素p的位置。

發(fā)表評論(共0條評論)

版權(quán)聲明：

1 本站所有資源（含游戲）均是軟件作者、開發(fā)商投稿，任何涉及商業(yè)盈利目的均不得使用，否則產(chǎn)生的一切后果將由您自己承擔！

2 本站將不對任何資源負法律責任，所有資源請在下載后24小時內(nèi)刪除。

3 若有關(guān)在線投稿、無法下載等問題，請與本站客服人員聯(lián)系。

4 如侵犯了您的版權(quán)、商標等，請立刻聯(lián)系我們并具體說明情況后，本站將盡快處理刪除，聯(lián)系QQ:2499894784

熱門軟件

最近更新