查看: 6891|回復(fù): 0

[DIV+CSS 教程筆記02] 第十八課程網(wǎng)站建設(shè)div+css當(dāng)中的 Positioning屬性定位的概念詳細(xì)講解

[復(fù)制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會(huì)員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達(dá)

樓主

發(fā)表于 2014-12-5 09:00:42 | 只看該作者 |只看大圖回帖獎(jiǎng)勵(lì)

|倒序?yàn)g覽 |閱讀模式

親注冊(cè)登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦�。ò蕡D片、文字詳情等）請(qǐng)您及時(shí)注冊(cè)登錄-bmrsportswear.com

您需要登錄才可以下載或查看，沒(méi)有賬號(hào)？立即注冊(cè)

本帖最后由 asp老師于 2014-12-5 09:45 編輯

static 是默認(rèn)值沒(méi)有定位元素出現(xiàn)正常的文本流里面
代碼如下：

<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
#a{width:200px; height:150px; background:#F00; margin:0px auto;}
</style>
</head>
<body>
<div id="a"></div>
</body>

復(fù)制代碼

fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò)“l(fā)eft”,“top”,“right”以及“bottom”的屬性進(jìn)行規(guī)定。
absolute 定位：生成絕對(duì)定位的元素，超出原來(lái)文本流元素的位置通過(guò)“l(fā)eft”,“top”,“right”以及“bottom”的屬性進(jìn)行規(guī)定。
如果我們?cè)?lt;style tpye="text/css"></style>當(dāng)中加入這樣代碼的話

#b{
width:200px;
height:200px;
background:#0F0;
position:absolute;
}

復(fù)制代碼

我們來(lái)分析這個(gè)代碼positon:absolute; 這個(gè)代碼的意識(shí)就是讓div的層隨意浮動(dòng) 我們可以通過(guò)手動(dòng)來(lái)設(shè)置這個(gè)div的位置，當(dāng)然也可以我們通過(guò)來(lái)設(shè)置“l(fā)eft”,“top”,“right”以及“bottom”的屬性進(jìn)行規(guī)定。好此時(shí)我們來(lái)在positon:absolute; 后面寫上如下代碼

top:200px;
left:300px;

復(fù)制代碼

那么此時(shí)的效果如下;

那么這個(gè)效果就是如下; 這個(gè)定位是對(duì)它的父框來(lái)定位的 ;

好我們來(lái)看positon:fixed; “l(fā)eft”,“top”,“right”以及“bottom”這樣設(shè)置會(huì)出現(xiàn)什么情況呢/我們來(lái)看如下代碼
我們通常要設(shè)置body的數(shù)值body{margin:0px 0px;} 這個(gè)是用來(lái)取消默認(rèn)的瀏覽器8px的設(shè)置

<style type="text/css">
body{margin:0px 0px;}
#a{width:700px; height:500px; background:#F00; }
#b{width:200px; height:200px; background:#0F0; position:fixed; top:20px; left:5px;}
</style>
</head>

復(fù)制代碼

這個(gè)代碼：position:fixed; top:20px; left:5px; 這個(gè)表示的是相對(duì)于瀏覽器的窗口位置的，效果如下：

我們此時(shí)可以看到這個(gè)綠色div的效果，這個(gè)效果是隨著瀏覽器進(jìn)行浮動(dòng)的，而不是通過(guò)div
如果我們此時(shí)修改為代碼如下：把這個(gè)紅色的div居中 margin:0px auto;

<style type="text/css">
body{margin:0px 0px;}
#a{width:700px; height:500px; background:#F00; margin:0px auto;}
#b{width:200px; height:200px; background:#0F0; position:fixed; top:20px; left:5px;}
</style>

復(fù)制代碼

此時(shí)的效果如下：

那么我們經(jīng)常會(huì)看到這樣的方法用在網(wǎng)站當(dāng)中的廣告，例如我們網(wǎng)站的左側(cè)用到的position:0px auto; 這樣來(lái)出現(xiàn)的效果，可以隨著滾動(dòng)條來(lái)進(jìn)行拖動(dòng)但是會(huì)固定在瀏覽器當(dāng)中同時(shí)他/她不會(huì)隨著瀏覽器進(jìn)行大小而進(jìn)行縮放！

道勤主機(jī)提供365天*24小時(shí)全年全天無(wú)休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過(guò)程中所遇到的一切問(wèn)題! 如果您是道勤主機(jī)用戶，那么您可以通過(guò)QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺(tái)提交工單這些方式聯(lián)系道勤主機(jī)客服！如果您不是我們的客戶也沒(méi)問(wèn)題，點(diǎn)擊頁(yè)面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購(gòu)買后，我們?yōu)槟赓M(fèi)進(jìn)行無(wú)縫搬家服務(wù)，讓您享受網(wǎng)站零訪問(wèn)延遲的遷移到道勤主機(jī)的服務(wù)！

本內(nèi)容系道勤團(tuán)隊(duì) bmrsportswear.com 客服與技術(shù)人員研究整理的智慧結(jié)晶，轉(zhuǎn)載勿用于商業(yè)用途，并保留本文鏈接，侵權(quán)必究！