HTML/CSS 定位中的「position:absolute」和「position:fixed」有何不同？

相對於父級或視窗固定定位元素

在HTML 和CSS 中，定位元素的方式主要有兩種：相對於父級或相對於視窗。

定位元素固定相對於Parent

要相對於父元素固定定位元素，請使用下列CSS 屬性：

position: absolute;

當元素絕對定位時，其位置是相對於父元素確定的。立即包含父元素。例如：

#parent {
  position: relative;
}
#child {
  position: absolute;
  left: 50px;
  top: 20px;
}

在此範例中，子元素將定位在距父元素左側 50 像素、距頂部 20 像素的位置。

定位元素固定相對於視窗

要相對於視窗固定元素的位置，請使用以下CSS property:

position: fixed;

當元素固定定位時，其位置是相對於視口決定的。例如：

#my-element {
  position: fixed;
  right: 0;
  top: 120px;
}

在此範例中，my-element 將位於視窗頂部 120 像素、距右側 0 像素的位置。

以上是HTML/CSS 定位中的「position:absolute」和「position:fixed」有何不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！