- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Static Positioning Using CSS
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 −
<!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 −
<!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>
Output
Following is the output for the above code −
Advertisements