這篇文章主要介紹“HTML怎么實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口移動(dòng)”，在日常操作中，相信很多人在HTML怎么實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口移動(dòng)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”HTML怎么實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口移動(dòng)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),旺蒼企業(yè)網(wǎng)站建設(shè),旺蒼品牌網(wǎng)站建設(shè),網(wǎng)站定制,旺蒼網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,旺蒼網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

如果想為元素設(shè)置層模型中的絕對(duì)定位，需要設(shè)置position:absolute(表示絕對(duì)定位)，這條語(yǔ)句的作用將元素從文檔流中拖出來(lái)，然后使用left、right、top、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊，則相對(duì)于body元素，即相對(duì)于瀏覽器窗口。

如下面代碼可以實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口向右移動(dòng)100px，向下移動(dòng)50px。

div{

width:200px;

height:200px;

border:2px red solid;

position:absolute;

left:100px;

top:50px;

}

效果如下：

HTML+CSS基礎(chǔ)課程

如果想為元素設(shè)置層模型中的相對(duì)定位，需要設(shè)置position:relative（表示相對(duì)定位），它通過(guò)left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過(guò)程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。

如下代碼實(shí)現(xiàn)相對(duì)于以前位置向下移動(dòng)50px，向右移動(dòng)100px;

#div1{

width:200px;

height:200px;

border:2px red solid;

position:relative;

left:100px;

top:50px;

}

效果圖：

什么叫做“偏移前的位置保留不動(dòng)”呢？

大家可以做一個(gè)實(shí)驗(yàn)，在右側(cè)代碼編輯器的19行div標(biāo)簽的后面加入一個(gè)span標(biāo)簽，在標(biāo)并在span標(biāo)簽中寫(xiě)入一些文字。如下代碼：

效果圖：

從效果圖中可以明顯的看出，雖然div元素相對(duì)于以前的位置產(chǎn)生了偏移，但是div元素以前的位置還是保留著，所以后面的span元素是顯示在了div元素以前位置的后面。

fixed：表示固定定位，與absolute定位類(lèi)型類(lèi)似，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁(yè)窗口）本身。由于視圖本身是固定的，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置，不會(huì)受文檔流動(dòng)影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實(shí)現(xiàn)相對(duì)于瀏覽器視圖向右移動(dòng)100px，向下移動(dòng)50px。并且拖動(dòng)滾動(dòng)條時(shí)位置固定不變。

#div1{

width:200px;

height:200px;

border:2px red solid;

position:fixed;

left:100px;

top:50px;

}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

....

使用position:absolute可以實(shí)現(xiàn)被設(shè)置元素相對(duì)于瀏覽器（body）設(shè)置定位以后，大家有沒(méi)有想過(guò)可不可以相對(duì)于其它元素進(jìn)行定位呢？答案是肯定的，當(dāng)然可以。使用position:relative來(lái)幫忙，但是必須遵守下面規(guī)范：

1、參照定位的元素必須是相對(duì)定位元素的前輩元素：

從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）。

2、參照定位的元素必須加入position:relative;

#box1{

width:200px;

height:200px;

position:relative;

}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來(lái)進(jìn)行偏移定位了。

#box2{

position:absolute;

top:20px;

left:30px;

}

這樣box2就可以相對(duì)于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）。

到此，關(guān)于“HTML怎么實(shí)現(xiàn)div元素相對(duì)于瀏覽器窗口移動(dòng)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！