CSS相對定位代碼示例

CSS相對定位是一種通過調整元素的位置來創(chuàng)建視覺效果的CSS技術，在相對定位中，元素的位置相對于其在正常文檔流中的位置進行調整，下面是一個簡單的CSS相對定位代碼示例，展示了如何應用這種技術。

HTML代碼：

<div id="relative-position-example">
  <div id="inner-div">內部元素</div>
</div>

CSS代碼：

#relative-position-example {
  position: relative; /* 將元素設置為相對定位 */
  width: 200px; /* 設置外部元素的寬度 */
  height: 200px; /* 設置外部元素的高度 */
  background-color: lightblue; /* 設置外部元素的背景顏色 */
}
#inner-div {
  position: relative; /* 將內部元素設置為相對定位 */
  top: 20px; /* 內部元素相對于外部元素的頂部位置 */
  left: 30px; /* 內部元素相對于外部元素的左側位置 */
  width: 100px; /* 設置內部元素的寬度 */
  height: 100px; /* 設置內部元素的高度 */
  background-color: lightgreen; /* 設置內部元素的背景顏色 */
}

在這個示例中，外部元素（#relative-position-example）被設置為相對定位，其寬度和高度分別為200像素，背景顏色為淺藍色，內部元素（#inner-div）同樣被設置為相對定位，其頂部和左側位置相對于外部元素分別為20像素和30像素，寬度和高度分別為100像素，背景顏色為淺綠色。

通過調整top和left屬性的值，您可以輕松地調整內部元素在外部元素中的位置，這種技術可以用于創(chuàng)建各種復雜的布局和視覺效果。