首頁 > web前端 > css教學 > HTML/CSS 定位中的「position:absolute」和「position:fixed」有何不同?

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

Susan Sarandon
發布: 2024-11-29 05:30:09
原創
154 人瀏覽過

How Do `position: absolute` and `position: fixed` Differ in HTML/CSS Positioning?

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

在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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板