Codestin Search App

Description

The position property controls how an element is placed in the page and how it participates in the document’s normal flow. It determines whether an element leaves space where it would normally be, or whether it is removed from that flow and overlaid on top of other content. That placement decision also affects which box is used as the element’s reference for offset calculations and whether the element creates a new stacking context; stacking order is further influenced by z-index.

Because offsets are interpreted relative to the element’s chosen reference, the meaning of offset properties such as top and left depends on the positioning mode in effect. Ancestor properties that establish new containing blocks or transform the coordinate system — for example an applied transform on a parent — can change where and how a positioned descendant is anchored, which is important when you want an element to be tied to a specific container rather than to the viewport.

Positioning interacts with normal layout behavior and other layout properties. How elements behave in flow alongside or around positioned items depends on their formatting context; for instance, the overall rendering will differ if you combine positioning with different display or float strategies. Likewise, spacing rules such as margin and wrapping behavior still matter when building responsive UIs, so mixing out-of-flow elements with flow-based layout requires care to avoid overlaps, unexpected reflow, or accessibility issues.

In practical use, this property is commonly used to create overlays, anchored UI elements, or to remove an element from normal layout to position it precisely. Because it affects stacking and flow, it’s a powerful tool but can also make layouts harder to maintain if overused; prefer clear containment and predictable anchoring (for example by keeping positioned elements within a well-defined container) and test across sizes to ensure responsive behavior.

Definition

Initial value: static
Applies to: All elements except for generated content
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.position

Interactive Demo

position: static;

position: relative;
top: 40px;
left: 40px;

position: absolute;
top: 40px;
left: 40px;

position: sticky;
top: 20px;

In this demo you can control the position property for the yellow box.

To see the effect of sticky positioning, select the position: sticky option and scroll this container.

The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in top), and will then stop scrolling, so it stays visible.

The rest of this text is only supplied to make sure the container overflows, so as to enable you to scroll it and see the effect.

Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.

Syntax

position: static | relative | absolute | sticky | center | page | fixed

Values

staticThis keyword let the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, and left properties do not apply.
relativeThis keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
absoluteDo not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
stickyThe box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes.
centerThe box's position (and possibly size) is specified with the top, right, bottom, and left properties. The box is vertically and horizontally centered within its containing block and these properties specify offsets with respect to the box's centered position within its containing block.
pageThe box's position is calculated according to the "absolute" model.
fixedDo not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Example

HTML

<section class="position-demo">

    <h1>CSS position property demo</h1>

    <p>Try scrolling to see sticky and fixed behavior.</p>



    <div class="container">

        <div class="box static">Static</div>



        <div class="box relative">Relative

            <span class="note">top: 10px; left: 10px;</span>

        </div>



        <div class="box absolute">Absolute</div>



        <div class="box sticky">Sticky</div>



        <div class="box">Other content to create flow</div>

    </div>



    <div class="spacer"></div>

</section>



<div class="box fixed">Fixed</div>

CSS

/* Basic page styles */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 0;
    padding: 20px;
    background: #f7f7fb;
    color: #0f172a;
}

.position-demo {
    max-width: 900px;
    margin: 0 auto;
}

h1 {
    font-size: 20px;
    margin: 0 0 8px 0;
}

p {
    margin: 0 0 12px 0;
    color: #475569;
}

/* Container demonstrates positioning context for absolute */
.container {
    position: relative; /* positions absolute children relative to this box */
    border: 1px dashed #cbd5e1;
    padding: 20px;
    height: 220px;
    overflow: auto;
    background: #ffffff;
    border-radius: 8px;
}

.box {
    padding: 10px 14px;
    background: #e2e8f0;
    border-radius: 6px;
    margin-bottom: 12px;
    width: 160px;
}

.static {
    /* position: static (default)  -  participates in normal flow */
}

.relative {
    position: relative; /* offset from its normal position */
    top: 10px;
    left: 10px;
    background: #c7f9cc;
}

.absolute {
    position: absolute; /* removed from flow; positioned relative to .container */
    top: 20px;
    right: 20px;
    background: #ffd8a8;
}

.fixed {
    position: fixed; /* fixed to the viewport */
    bottom: 20px;
    right: 20px;
    background: #ffd6e0;
    box-shadow: 0 4px 10px rgba(2,6,23,0.08);
}

.sticky {
    position: sticky; /* sticks to top of viewport when scrolled */
    top: 0;
    background: #cfe8ff;
    z-index: 2;
}

.note {
    display: block;
    font-size: 12px;
    color: #475569;
    margin-top: 6px;
}

.spacer {
    height: 800px; /* create scrollable page to demonstrate sticky & fixed */
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS position property. Hover over a browser icon to see the version that first introduced support for this CSS property.