小編給大家分享一下CSS中定位float、static、relative、absolute、fixed的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計(jì),青山湖網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:青山湖等地區(qū)。青山湖做網(wǎng)站價(jià)格咨詢:028-86922220
html的對(duì)象是按照文檔流的方式,從上而下,從左往右的布置對(duì)象/元素。
static: 元素默認(rèn)的定位方式,遵從基本的html布置規(guī)則
relative:相對(duì)定位,相對(duì)哪個(gè)對(duì)象呢? 相對(duì)的是元素本身的位置
圖中實(shí)體框是div5原本位置,虛線框6是進(jìn)行相對(duì)定位后的位置,但是元素本身在文檔流里占據(jù)的是實(shí)體框的位置,有下一個(gè)元素div7時(shí)是以實(shí)體框?yàn)閰⒖嫉摹?/p>
absolute:絕對(duì)定位,脫離文檔流。絕對(duì)定位也有個(gè)參考目標(biāo)!如果父級(jí)元素是定位方式是 relative/absolute/fixed,那么就以父級(jí)元素為參考目標(biāo),否則就以body為參考目標(biāo)
fixed:絕對(duì)定位,以瀏覽器窗口為參考目標(biāo)。
補(bǔ)充一點(diǎn),瀏覽器窗口 html 一般情況會(huì)比body大 9px左右,可以通過(guò)設(shè)置body的外邊距消除。
另外 z-index這個(gè)參數(shù)只會(huì)在定位方式是relative、absolute時(shí)生效
看完了這篇文章,相信你對(duì)“CSS中定位float、static、relative、absolute、fixed的示例分析”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!