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

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

[復(fù)制鏈接]

asp老師

226 主題	12 回帖	3260 積分

終身VIP會員

Rank: 7 Rank: 7 Rank: 7

積分: 3260

發(fā)消息

電梯直達(dá)

樓主

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

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

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

您需要登錄才可以下載或查看，沒有賬號？立即注冊

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

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

<title>無標(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 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過“l(fā)eft”,“top”,“right”以及“bottom”的屬性進(jìn)行規(guī)定。
absolute 定位：生成絕對定位的元素，超出原來文本流元素的位置通過“l(fā)eft”,“top”,“right”以及“bottom”的屬性進(jìn)行規(guī)定。
如果我們在<style tpye="text/css"></style>當(dāng)中加入這樣代碼的話

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

復(fù)制代碼

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

top:200px;
left:300px;

復(fù)制代碼

那么此時的效果如下;

那么這個效果就是如下; 這個定位是對它的父框來定位的 ;

好我們來看positon:fixed; “l(fā)eft”,“top”,“right”以及“bottom”這樣設(shè)置會出現(xiàn)什么情況呢/我們來看如下代碼
我們通常要設(shè)置body的數(shù)值body{margin:0px 0px;} 這個是用來取消默認(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ù)制代碼

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

我們此時可以看到這個綠色div的效果，這個效果是隨著瀏覽器進(jìn)行浮動的，而不是通過div
如果我們此時修改為代碼如下：把這個紅色的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ù)制代碼

此時的效果如下：

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

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

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