如何使用 CSS 精確定位容器內的元素？

相對於其容器定位元素

創建需要在其容器內定位的元素時，CSS 提供了精確靈活的選項來提供精確的控制和跨瀏覽器相容性。

位置： relative

• 相對於自身定位元素。
• 元素從正常流中移除，並依指定值（上、右、下、左）偏移。
• 不影響周圍元素的佈局。

位置： Absolute

• 相對於容器定位元素。
• 預設情況下，容器是瀏覽器視窗。
• 如果父元素有位置： relative 或position：絕對集，它作為父級來定位其

範例：

<div>
<pre class="brush:php;toolbar:false">#container {
  position: absolute;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: relative;
  top: 50px;
  left: 20px;
}

範例：

此程式碼將#box 元素放置在距離#box 頂部50 像素、距左側20像素的位置。容器元素，提供對其在容器內放置的精確控制。