在CSS中,位置是通過設置元素的位置、浮動和頁面布局來實現的。在此過程中,CSS使用的最基本的屬性是position。
position屬性指定元素在文檔中的定位方式。默認的定位方式是static,即找不到位置。以下是一些值可以使用:
position: static; // 默認 position: relative; // 相對定位 position: absolute; // 絕對定位 position: fixed; // 固定定位
相對定位是相對于元素自己的位置進行定位。可以使用top、right、bottom和left屬性來指定距離父元素邊緣的偏移量。
div.relative { position: relative; left: 30px; top: 30px; }
絕對定位是相對于最近的非靜態父元素,如果沒有,則相對于body元素進行定位。絕對定位元素不會在頁面布局中占據空間,因此其兄弟元素的位置可能會受到影響。
div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; }
固定定位與絕對定位類似,但元素是相對于瀏覽器窗口而不是文檔進行定位。
div.fixed { position: fixed; bottom: 0; right: 0; width: 200px; height: 100px; }
除了position屬性之外,還有float屬性。浮動元素不會在頁面布局中占據空間,并向左或向右流動直到其周圍沒有浮動元素。
img { float: left; margin-right: 10px; }
以上是CSS中關于定義位置的一些基本方法,可以應用于多種場景和實現不同的頁面布局。
上一篇mysql互聯網架構變化
下一篇調用本機時間CSS