Dreamweaver教程-CSS定位(positon)

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

文件大小:

軟件介紹

1.相對(duì)定位(relative)

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

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

2.絕對(duì)定位(absolute)

絕對(duì)定位非常好理解，你指定元素出現(xiàn)的坐標(biāo)(x,y)，然后它就準(zhǔn)確無誤地顯示在那里。

<!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">絕對(duì)定位</p>
 </body>
 </html>

定位中使用的left屬性表示元素距離左側(cè)的距離，而top屬性表示距離上方的位置。如果用坐標(biāo)系來理解的話left就是橫坐標(biāo)x，而top就是縱坐標(biāo)y。

絕對(duì)定位其實(shí)也是相對(duì)定位

沒錯(cuò)，絕對(duì)定位會(huì)按照我們給定的坐標(biāo)x，y來準(zhǔn)確地定位你一個(gè)元素。但是問題在于，坐標(biāo)系的原點(diǎn)在哪里呢？答案就是父元素。

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

<p>
  段落正文
 <strong>強(qiáng)調(diào)文字</strong>
<p>

若給strong元素設(shè)置絕對(duì)定位，那么坐標(biāo)原點(diǎn)將會(huì)是父元素p的位置。

發(fā)表評(píng)論(共0條評(píng)論)
請(qǐng)自覺遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)，評(píng)論內(nèi)容只代表網(wǎng)友觀點(diǎn)，發(fā)表審核后顯示！

版權(quán)聲明：

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

2 本站將不對(duì)任何資源負(fù)法律責(zé)任，所有資源請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除。

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

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

返回頂部