Static Positioning Using CSS

CSS Web Development Front End Technology

We can define positioning of an element in CSS as static which does not renders the element in any special way, but in a normal way. Elements with positioning as static are not affected by any of the CSS Positioning properties (left, right, top and bottom).

Example

Let’s see an example of CSS Static Positioning Method −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
}
div:first-child {
   position: static;
   background-color: orange;
   text-align: center;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>This is demo text wherein we are displaying an example for static positioning.</p>
<div></div>
</body>
</html>

Output

Following is the output for the above code −

Example

Let’s see another example of positioning method −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   border: 2px double #a43356;
   margin: 5px;
   padding: 5px;
}
#d1 {
   position: relative;
   height: 10em;
}
#d2 {
   position: absolute;
   width: 20%;
   bottom: 10px; /*relative to parent d1*/
}
#d3 {
   position: fixed;
   width: 30%;
   top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. 
<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>