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
Static Positioning in CSS
With static positioning, the elements are not affected by the top, bottom, left, and right properties. Static positioning is the default positioning value for all HTML elements. For this, use position: static.
Syntax
selector {
position: static;
}
Key Characteristics
Elements with static positioning follow the normal document flow and ignore positioning properties like top, left, right, and bottom. They appear exactly where they would naturally be placed in the HTML structure.
Example
Let us see an example demonstrating static positioning −
<!DOCTYPE html>
<html>
<head>
<style>
.static-box {
position: static;
color: white;
background-color: orange;
border: 2px dashed blue;
padding: 20px;
margin: 10px 0;
top: 50px; /* This will be ignored */
left: 100px; /* This will be ignored */
}
.normal-text {
margin: 10px 0;
padding: 5px;
}
</style>
</head>
<body>
<h2>Static Positioning Demo</h2>
<p class="normal-text">This is text before the static element.</p>
<div class="static-box">
This div has position: static. The top and left properties are ignored.
</div>
<p class="normal-text">This is text after the static element.</p>
</body>
</html>
A webpage displays with a heading, followed by a paragraph, then an orange box with blue dashed border containing white text, and finally another paragraph below. The orange box appears in its natural position in the document flow, ignoring the top and left properties specified in the CSS.
Conclusion
Static positioning is the default behavior where elements follow the normal document flow. Unlike other positioning values, static elements ignore top, bottom, left, and right properties completely.
Updated on: 2026-03-15T13:47:13+05:30
177 Views
Advertisements