關(guān)于定位

我遇到的問題

最近修改了幾個(gè)手機(jī)web端的幾個(gè)樣式問題,都是關(guān)于定位的問題,這里稍作總結(jié)一下html定位的幾個(gè)屬性,給自己或者來訪者當(dāng)個(gè)手冊(cè),避免不必要的修改。

關(guān)于html定位

html的定位問題說老生常談算不上,但相對(duì)于網(wǎng)站的制作也算是不可避免的了。
static(默認(rèn))
當(dāng)你沒有為一個(gè)元素(例如div)指定定位方式時(shí),默認(rèn)為static,也就是按照文檔的流式(flow)定位,將元素放到一個(gè)合適的地方。所以在不同的分辨率下,采用流式定位能很好的自適合,取得相對(duì)較好的布局效果。
一般來說,我們不需要指明當(dāng)前元素的定位方式是static——因?yàn)檫@是默認(rèn)的定位方式。除非你想覆蓋從父元素繼承來的定位系統(tǒng)。
left,top屬性對(duì)static沒有效果,static是靠margin這些定位的。
relative(相對(duì)定位)
在static的基礎(chǔ)上,如果我想讓一個(gè)元素在他本來的位置做一些調(diào)整(位移),我們可以將該元素定位設(shè)置為relative,同時(shí)指定相對(duì)位移(利用top,bottom,left,right)。
有一點(diǎn)需要注意的是,相對(duì)定位的元素仍然在文檔流中,仍然占據(jù)著他本來占據(jù)的位置空間——雖然他現(xiàn)在已經(jīng)不在本來的位置了。
absolute(絕對(duì)定位)
如果你想在一個(gè)文檔(Document)中將一個(gè)元素放至指定位置,你可以使用absolute來定位,將該元素的position設(shè)置為absolute,同時(shí)使用top,bottom,left,right來定位。
如果沒有父元素,位置是相對(duì)于body來進(jìn)行的。
絕對(duì)定位會(huì)使元素從文檔流中被刪除,結(jié)果就是該元素原本占據(jù)的空間被其它元素所填充。
fixed(絕對(duì)定位)
此屬性是始終定位在屏幕的某個(gè)位置。
如果對(duì)一個(gè)父元素設(shè)置relative,而對(duì)它的一個(gè)子元素設(shè)置absolute,則子元素的絕對(duì)定位的參照物為父元素。

針對(duì)手機(jī)web網(wǎng)站

如若我們做的網(wǎng)站是要適配于手機(jī)的或者有自己專門的手機(jī)網(wǎng)站,那么就要注意一些問題了,市面上的主流手機(jī)相當(dāng)多,蘋果手機(jī)占得比重還是比較大的,由于蘋果手機(jī)專有的類似彈簧效果,如果我們采用fixed定位的話,會(huì)使設(shè)置的元素不隨下拉的效果移動(dòng),就會(huì)產(chǎn)生些許不好的用戶體驗(yàn),當(dāng)然這種細(xì)節(jié)問題也無傷大雅,但是能避免我們還是盡量避免,個(gè)人建議,僅供參考。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容