CSS 相對定位屬性詳解：position 和relative
#引言：
在CSS 中，我們常常需要對元素進行定位，使其在頁面中的特定位置顯示。而相對定位屬性 position 和 relative 就是其中常用的一對屬性。本文將詳細介紹這兩個屬性的用法和效果，並提供具體的程式碼範例。
一、position 屬性：
position 屬性主要用於設定區塊層級元素的定位方式。它有以下幾個可選值：
二、relative 屬性：
relative 屬性可以與 position 屬性一同使用，它用於相對於元素本身進行定位。相對定位通常是相對於元素在正常文件流中的位置進行的，但也可以透過設定 top、bottom、left 和 right 屬性來微調位置。
具體程式碼範例：
以下是一個簡單的HTML 頁面，其中包含了一個帶有相對定位的元素：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
height: 400px;
background-color: #F2F2F2;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: #FF0000;
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>在上述程式碼中，我們建立了一個容器div ，寬高為400px，並設定背景顏色為#F2F2F2，將其position 屬性設為relative，以實現相對定位。然後在容器內建立了一個小方塊box，寬高為100px，背景顏色為#FF0000，將其position 屬性同樣設定為relative，並透過設定top 和left 屬性分別將其向下移動了50px 和向右移動了50px。
運行上述程式碼，我們可以看到頁面中出現了一個相對定位的紅色方塊，它的位置是相對於容器來進行調整的。
結語：
透過使用相對定位屬性 position 和 relative，我們可以輕鬆地對元素進行定位。本文詳細介紹了這兩個屬性的概念，並提供了具體的程式碼範例。希望讀者透過本文的介紹，能更理解和掌握這兩個屬性的用法和效果。
以上是CSS 相對定位屬性詳解：position 與 relative的詳細內容。更多資訊請關注PHP中文網其他相關文章！
