CSS中定位float、static、relative、absolute、fixed的示例分析

小編給大家分享一下CSS中定位float、static、relative、absolute、fixed的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

html的對(duì)象是按照文檔流的方式，從上而下，從左往右的布置對(duì)象/元素。

static: 元素默認(rèn)的定位方式，遵從基本的html布置規(guī)則

relative:相對(duì)定位，相對(duì)哪個(gè)對(duì)象呢？ 相對(duì)的是元素本身的位置

<div class="div5"></div>
<div class="div7"></div>
<style>
    div{
        width:300px;
        height:200px;
    }
    .div5{
        position:relative;
        left:20px;//往下方偏移20px
        top:30px;//往右邊偏移20px
    }
</style>

圖中實(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左右，可以通過設(shè)置body的外邊距消除。

另外 z-index這個(gè)參數(shù)只會(huì)在定位方式是relative、absolute時(shí)生效

看完了這篇文章，相信你對(duì)“CSS中定位float、static、relative、absolute、fixed的示例分析”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！