CSS position: static Property Value

position: staticis the default value of the CSS positioning property.

When an element'spositionValue set tostaticwhen the element will follow the document'sNormal flowArrange,Not affected top、right、bottom、leftandz-indexinfluence of positioning properties such as.

In other words,staticmeans no special positioning is applied; the element simply stays where it naturally belongs.

Word Definitions：staticFrom Latinstaticus, meaning "stationary, unmoving", indicates that the element remains in its original position.

Basic Syntax

position: staticis the simplest and most basic value of the CSS positioning property.

/* 语法 */
position: static;

/* 实际示例 */
.box {
    position: static;
}

Property description

Property value	Description
`static`	The default value; elements are positioned according to the normal document flow and are not affected by positioning properties.

Effect of related positioning properties on static

Property	Effect on static elements
`top`	Invalid, produces no positioning effect
`right`	Invalid, produces no positioning effect
`bottom`	Invalid, produces no positioning effect
`left`	Invalid, produces no positioning effect
`z-index`	Invalid, cannot manually set stacking order

Example

Let's understand through examplesposition: staticThe behavior.

Example 1: static is the default positioning method.

Even if not explicitly setposition: static, elements are positioned as static by default. Let's compare:

Example

<!DOCTYPE html>
<html>
<head>
<style>
/* Container styles: set background and padding for easy observation */
.container {
padding: 20px;
background-color: #f5f5f5;
border: 2px solid #ddd;
}

/* Three div blocks, default is static positioning */
.box {
padding: 15px;
margin: 10px 0;
background-color: #3498db;
color: white;
border-radius: 4px;
}

/* The second box tries to position using the top property (not valid for static) */
.box-2 {
position: static; /* Explicit declaration is also static */
top: 100px; /* This property will not have any effect */
}
</style>
</head>
<body>
<div class="container">
<div class="box">First box (default static)</div>
<div class="box box-2">Second box (explicit static + top:100px)</div>
<div class="box">Third box (default static)</div>
</div>
</body>
</html>

Effect description:

you will find the second box does not because oftop: 100pxmove downward. This is becausestaticpositioned elements completely ignoretop、right、bottom、leftthese positioning properties.

Example 2: static elements cannot have z-index set

In the normal document flow, the stacking order of elements is determined by their order of appearance in HTML. We cannot usez-indexto change this order:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative; /* parent container set to relative as reference */
height: 150px;
background-color: #f0f0f0;
}

.box {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}

/* three boxes appear in sequence */
.box-1 {
background-color: #e74c3c; /* red */
position: static; /* default positioning */
z-index: 999; /* invalid! */
}

.box-2 {
background-color: #2E7DCC; /* green */
position: static;
margin-top: -30px; /* create overlap with negative margin */
margin-left: 60px;
}

.box-3 {
background-color: #9b59b6; /* purple */
position: static;
margin-top: -30px;
margin-left: 120px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-1">Box 1 (z-index:999)</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
</div>
<p>Even if Box 1 is set to z-index: 999, because it is statically positioned, z-index has no effect.</p>
<p>The final stacking order is still: later elements are on top (Box 3 is the topmost, Box 1 is the bottommost).</p>
</body>
</html>

Use Case

Althoughposition: staticIt seems to "do nothing", but it is useful in the following scenarios:

Scenario 1: Reset positioning

When you need to cancel a previously set positioning effect, you can setpositionChange backstatic：

/* 之前可能是 relative、absolute 或 fixed */
.sidebar {
    position: fixed;
    top: 0;
}

/* 现在需要取消固定定位，恢复正常布局 */
.sidebar {
    position: static;  /* 移除固定定位效果 */
}

Scenario 2: As a reference for positioned child elements.

Althoughstaticitself is not positioned, but it can serve aspositioning contextof the "reference":

/* 父元素设置为 relative，虽然它自己可能是 static */
.parent {
    position: relative;  /* 创建新的定位上下文 */
}

/* 子元素 absolute 会相对于这个 parent 定位 */
.child {
    position: absolute;
    top: 10px;
    left: 10px;
}

Scenario 3: Debugging and testing

During development, if you're not sure why an element is positioned, you can first set it back tostaticto troubleshoot:

.debug-element {
    position: static;  /* 临时设为 static 看原始位置 */
}

Notes

Common misconceptions:Many beginners will try to usetop: 0、left: 0properties like these to "reset" the element to the top-left corner, but these properties have no effect onstaticelements at all. If you need such an effect, you should userelative、absoluteorfixedpositioning.

Comparison with other positioning values

position value	Whether it is out of the document flow	Whether it is affected by top/right/bottom/left	Supports z-index
`static`	No, maintains normal layout	no	no
`relative`	No, but it can be offset	Yes, offset relative to original position	Yes
`absolute`	Yes, out of the document flow	Yes, relative to nearest positioned ancestor	Yes
`fixed`	Yes, out of the document flow	Yes, positioned relative to viewport	Yes
`sticky`	Yes, fixed after scrolling to threshold	Yes, set threshold position	Yes

Summary

position: staticis the foundation of CSS positioning; understanding its behavior is crucial to mastering other positioning methods.

Remember the following key points:

staticYespositionThe default value of the property
staticElements layout according to normal document flow
top、right、bottom、leftproperty pairstaticelementInvalid
z-indexproperty pairstaticelementInvalid
is commonly used to reset positioning or as a baseline for the positioning context.

CSS position Property

other extensions