CSS中設(shè)置文字的位置主要涉及到兩個(gè)屬性:position
和top
、right
、bottom
、left
。
position
屬性用于設(shè)置文字的定位方式,如相對(duì)定位(relative)、***定位(absolute)、固定定位(fixed)等。
top
、right
、bottom
、left
屬性則用于設(shè)置文字在定位后的具體位置。
下面是一個(gè)具體的例子,說(shuō)明如何使用CSS設(shè)置文字的位置:
<div id="example">這是一段示例文字。</div>
#example { position: absolute; top: 50px; right: 0; }
在這個(gè)例子中,文字“這是一段示例文字?!北辉O(shè)置為***定位,距離頁(yè)面頂部50像素,并位于右側(cè)邊緣,無(wú)論頁(yè)面如何滾動(dòng),這段文字都會(huì)保持在***位置。
如果你想讓文字相對(duì)于其正常位置進(jìn)行定位,可以使用相對(duì)定位(relative)。
#example { position: relative; top: 20px; left: 30px; }
在這個(gè)例子中,文字會(huì)相對(duì)于其原始位置向下移動(dòng)20像素,并向右移動(dòng)30像素。
固定定位(fixed)則常用于創(chuàng)建固定在頁(yè)面某處的元素,如側(cè)邊欄或底部欄。
#example { position: fixed; bottom: 0; right: 0; }
在這個(gè)例子中,文字會(huì)被固定在頁(yè)面的右下角,無(wú)論頁(yè)面如何滾動(dòng),這段文字都會(huì)保持在固定位置。