When a web page element changes from `position: fixed` to `position: absolute`, its JavaScript position calculation must also change. A `position: fixed` element is placed relative to the user's screen. A `position: absolute` element is placed relative to its parent element.
By Pawan Nayar · from the LLOS AI Learning record
When a web page element changes from `position: fixed` to `position: absolute`, its JavaScript position calculation must also change.
A `position: fixed` element is placed relative to the user's screen. A `position: absolute` element is placed relative to its parent element.
A `position: fixed` element stays in the same spot on the screen, even when the user scrolls. Its `top` value is measured from the top of the screen. A `position: absolute` element moves with its parent element. Its `top` value is measured from the top of its parent. If the parent element is already below a header, adding the header's height again will push the element down too far. This creates an unwanted gap.
A developer creates a side panel that is `position: fixed` and sets its `top` to 80 pixels. This places it below a global header that is 80 pixels tall. Later, the developer changes the panel to `position: absolute` inside the main content area. The main content area already starts below the 80-pixel header. If the JavaScript still adds 80 pixels to the panel's `top` value, the panel will appear 80 pixels too low. This creates a large empty space above the panel.
Resolved from this lesson's own record — real definitions, not invented for this page.
More from the same record, pulled by shared topic — not written new for this page.
A button should only be as wide as its text and the space around the text. This is called content-sized.
A developer uses `#interactive-svg-demo` for the main section that holds an SVG image. JavaScript code will interact with this section.
A developer must test the website at 360, 390, and 412 pixels wide. These are common small screen sizes.
A developer uses a main template file. This template has a basic structure.
When a web page element changes from `position: fixed` to `position: absolute`, its JavaScript position calculation must also change. A `position: fixed` element is placed relative to the user's screen. A `position: absolute` element is placed relative to its parent element.