轉(zhuǎn)自： http://blog.onlygrape.com/position/186

?

定義
position 屬性把元素放置到一個(gè)靜態(tài)的、相對(duì)的、絕對(duì)的、或固定的位置中。

span>position版本：CSS2　 兼容性：IE4+ NS4+　繼承性：無(wú)br>

語(yǔ)法：
position : static | absolute | fixed | relative

?

參數(shù)：
static：默認(rèn)。它始終會(huì)處于頁(yè)面流給予的位置（static 元素會(huì)忽略任何 top、bottom、left 或 right 聲明）。

relative：位置被設(shè)置為 relative 的元素，可將其移至相對(duì)于其正常位置的地方，因此 “l(fā)eft:20″ 會(huì)將元素移至元素正常位置左邊 20 個(gè)像素的位置。

absolute：位置設(shè)置為 absolute 的元素，可定位于相對(duì)于包含它的元素的指定坐標(biāo)。此元素的位置可通過(guò) “l(fā)eft”、”top”、”right” 以及 “bottom” 屬性來(lái)規(guī)定。

fixed：位置被設(shè)置為 fixed 的元素，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)。此元素的位置可通過(guò) “l(fā)eft”、”top”、”right” 以及”bottom” 屬性來(lái)規(guī)定。不論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位置。工作于 IE7（strict 模式）。

HTML定位規(guī)則
absolute : 　將對(duì)象從文檔流中拖出，使用left， right， top， bottom 等屬性進(jìn)行絕對(duì)定位。而其層疊通過(guò)z-index屬性定義。此時(shí)對(duì)象不具有邊距，但仍有補(bǔ)白和 邊框
relative : 　對(duì)象不可層疊，但將依據(jù)left，right， top， bottom等屬性在正常文檔流中偏移位置
fixed : 　IE5.5及NS6尚不支持此屬性

圖片垂直居中代碼：

<!DOCTYPE?html?PUBLIC?“-//W3C//DTD?XHTML?1.0?Strict//EN”?“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<style?type=”text/css”>
<!–
*?{margin:0;padding:0}
div?{
?width:500px;
?height:500px;
?line-height:500px;
?border:1px?solid?#ccc;
?overflow:hidden;
?position:relative;
?text-align:center;
?}
div?p?{
?position:static;
?+position:absolute;
?top:50%;
?vertical-align:middle
?}
img?{
?position:static;
?+position:relative;
?top:-50%;left:-50%;
?width:276px;
?height:110px;
?vertical-align:middle
?}
–>
</style>
<div><p><img?src=”http://www.google.com/intl/en/images/logo.gif”?/></p></div>

?

轉(zhuǎn)載于:https://www.cnblogs.com/iswszheng/archive/2009/07/29/1525033.html

總結(jié)

以上是生活随笔為你收集整理的position属性及实现图片垂直居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。