The CSS position attribute has five main values, which control how elements are positioned in the web page. 1. Static is the default behavior, and elements follow document flow and ignore attributes such as top and bottom; 2. Relative allows relative movement without leaving the document flow, retaining the original placeholder space; 3. absolute makes elements separate from document flow and position based on recent positioning ancestor elements; 4. fixed is similar to absolute but always based on browser window positioning, keeping the position unchanged when scrolling; 5. sticky is a blending mode, which appears to be relative before scrolling to a specific position, and then fixed to the viewport, suitable for sticky headers or sidebars.

The CSS position property controls how elements are positioned on a webpage. Understanding its different values is key to building layouts that behave the way you want. Here's what each value does and when to use it.

Static Positioning (Default Behavior)

This is the default for all elements. When you don't set the position property, or explicitly set it to static , the element follows the normal document flow.

• It ignores top , bottom , left , right , and z-index properties.
• You won't notice any special behavior with static positioning — it's just how elements normally appear.

Most of the time, you don't need to think about static unless you're resetting an element back to normal after using another position value.

Relative Positioning: Move Without Leaving the Flow

When you set position: relative , the element stays in the document flow, but you can shift it using top , bottom , left , or right .

• The space it originally occurred is preserved.
• Other elements around it act like it never moved.
• It can be layered with z-index .

This is useful when you want to nudge an element slightly from where it would normally sit — like adjusting the placement of a label or icon without messing up the layout.

Example:

 .box {
  position: relative;
  top: 10px;
  left: 20px;
}

This moves the box down and right by 10px and 20px respectively, but the original spot still takes up space.

Absolute Positioning: Take It Out of the Flow

With position: absolute , the element is removed from the normal document flow. It no longer affects other elements' positions.

• It's positioned relative to the nearest positioned ancestor (not static).
• If there isn't one, it goes all the way up to the viewport.
• You can place it exactly where you want using directional properties ( top , right , etc.).

This is handy for dropdown menus, toolstips, or overlays that need to break out of their container.

A few things to watch out for:

• If no parent has a non-static position, it might end up attached to the wrong reference point.
• Be careful stacking multiple absolutely positioned items — z-index becomes important.

Fixed Positioning: Always Stays in View

position: fixed behaves similarly to absolute , but instead of being relative to a parent, it's always positioned relative to the browser window.

• Even if the page scrolls, the element stays in the same place on screen.
• Useful for navigation bars, floating buttons, or persistent UI elements.

For example, a "Back to Top" button that sticks to the bottom-right corner of the screen:

 .button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Just keep in mind that fixed positioning can sometimes interfere with mobile scrolling behaviors or cause layout issues if not handled carefully.

Sticky Positioning: A Hybrid That Reacts to Scroll

position: sticky is a mix between relative and fixed . It acts like a relatively positioned element until it reaches a certain scroll point — then it sticks.

• You must define at least one direction ( top , bottom , etc.) for it to work.
• It remains in the document flow until it hits the defined threshold.
• Great for headers, sidebars, or anything that should stay visible during scrolling.

Common use case: a table header that sticks to the top while users scroll through rows.

Gotchas:

• Doesn't work inside containers with overflow: hidden .
• Parent elements shouldn't clip content, or the sticky effect won't trigger.

That's basically it. Each value serves a specific purpose and knowing when to use them make layout work a lot smoother.

The above is the detailed content of Explain the different values of the CSS `position` property. For more information, please follow other related articles on the PHP Chinese website!