CSS中的定位

標籤：style   color   os   width   io   re   

普通定位

positiont：static

普通文檔流中的元素的position的預設值為static，無需主動聲明。忽略top、right、bottom、left和z-index。

相對定位

position：relative

.relative{    position:relative;    left:20px;    top:20px;}

擁有relateive類的元素將相對於原來的位置向右移動20px，向下移動20px。而且無論怎麼移動，元素也依舊會佔據原來的位置。

絕對位置

position：absolute

絕對位置的元素與文檔流無關，因此不佔據任何空間。

產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。若沒有這樣的父元素，那麼它的位置是相對於初始包含塊。

固定定位

position：fixed

產生固定定位的元素，相對於瀏覽器視窗進行定位。

開源中國中右下角綠色的”top“功能，就是這樣定位。

通過chrome的開發工具查看了下，代碼是這樣的。

<div id="topcontrol" title="回到頂部" style="position: fixed; bottom: 165px; right: 100px; cursor: pointer; display: block;">    <img src="/img/gotop.gif" style="width:31px; height:31px;"></div>

浮動

float：left | right

浮動的元素不在普通文檔流中，因此文檔流中的塊框表現得就像浮動元素不存在一樣。