Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS position: static;
The CSS position: static property sets an element to its normal position in the document flow. This is the default positioning behavior for all HTML elements.
Syntax
selector {
position: static;
}
Key Characteristics
Elements with position: static have these characteristics −
- They follow the normal document flow
- The
top,bottom,left, andrightproperties have no effect - They cannot be moved using positioning properties
- This is the default value for all elements
Example
The following example demonstrates static positioning behavior −
<!DOCTYPE html>
<html>
<head>
<style>
.static-box {
position: static;
border: 3px solid blue;
background-color: lightblue;
padding: 20px;
margin: 10px;
width: 300px;
}
.normal-box {
border: 3px solid green;
background-color: lightgreen;
padding: 20px;
margin: 10px;
width: 300px;
}
</style>
</head>
<body>
<h2>CSS Position Static Example</h2>
<div class="normal-box">
Normal div element (default static positioning)
</div>
<div class="static-box">
Div with position: static; explicitly set
</div>
<div class="normal-box">
Another normal div element
</div>
</body>
</html>
Three rectangular boxes appear stacked vertically in normal document flow. The middle box (blue) with explicit "position: static" behaves identically to the other boxes (green) that use default positioning.
Conclusion
The position: static property maintains normal document flow and is rarely used explicitly since it's the default. It's mainly useful when you need to reset an element's position back to normal.
Updated on: 2026-03-15T12:14:30+05:30
287 Views
Advertisements