CSS關於定位float、static、relative、absolute、fixed

標籤：relative   定位   css   

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

static: 元素預設的定位方式，遵從基本的html布置規則

relative:相對定位，相對哪個對象呢？ 相對的是元素本身的位置

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

650) this.width=650;" width="499" height="523" title="relative" style="width:269px;height:202px;" alt="wKioL1mT4Y7C_UJQAAANwbcjT4o416.png-wh_50" src="https://s1.51cto.com/wyfs02/M02/9E/99/wKioL1mT4Y7C_UJQAAANwbcjT4o416.png-wh_500x0-wm_3-wmp_4-s_657572622.png" />

圖中實體框是div5原本位置，虛線框6是進行相對定位後的位置，但是元素本身在文檔流裡佔據的是實體框的位置，有下一個元素div7時是以實體框為參考的。

absolute:絕對位置，脫離文檔流。絕對位置也有個參考目標！如果父級元素是定位方式是 relative/absolute/fixed，那麼就以父級元素為參考目標，否則就以body為參考目標

fixed:絕對位置，以瀏覽器視窗為參考目標。

     補充一點，瀏覽器視窗 html 一般情況會比body大 9px左右，可以通過設定body的外邊距消除。

另外 z-index這個參數只會在定位方式是relative、absolute時生效

本文出自 “12257285” 部落格，請務必保留此出處http://12267285.blog.51cto.com/12257285/1956761

CSS關於定位float、static、relative、absolute、fixed