css上邊偏移屬性top、下邊偏移屬性bottom

2012/11/27 10:24:42作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例介紹】

通過top屬性來設(shè)置上邊偏移屬性，通過bottom屬性來設(shè)置下邊偏移屬性。

【基本語法】

position：adsolute |   fixed |   relative
top：auto |   長度值 |   百分比
bottom：auto  |   長度值 |   百分比

【語法介紹】

這個屬性只有當(dāng)position屬性設(shè)置為absolute、fixed、relative時才有效。而且在position屬性取值不同時，它們的含義也不同。top和bottom屬性值除了可以設(shè)置為絕對的像素數(shù)外，還可以設(shè)置百分?jǐn)?shù)。

【實例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
h2.pos_top
{
 position:absolute;
 top:20px;
 }
h2.pos_bottom
{
position:absolute;
bottom:20px
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>18.2.2 上邊偏移屬性top、下邊偏移屬性bottom</title>
</head>
<body>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>這是位于正常位置的標(biāo)題</h2>
<h2 class="pos_top">top:20px;設(shè)置標(biāo)題距離頂部20px</h2>
<p>&nbsp;</p>
<h2 class="pos_bottom">bottom:20px;設(shè)置標(biāo)題距離底部20px</h2>
</body>
</html>

【代碼分析】

top：20px；設(shè)置標(biāo)題距離頂部20像素，bottom：20px；設(shè)置標(biāo)題距離底部20像素，如圖所示。

上邊偏移屬性top、下邊偏移屬性bottom運(yùn)行效果