Fixed Positioning Using CSS

CSS Web Development Front End Technology

We can define positioning of an element in CSS as fixed which renders the element relative to the user’s viewport. Elements with positioning method as fixed do not move even on scroll and are positioned by CSS Positioning properties (left, right, top and bottom).

Example

Let’s see an example for CSS Fixed Positioning Method −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
div:first-child {
   background-color: orange;
   text-align: center;
}
div:last-child {
   width: 250px;
   height: 100px;
   margin: auto;
   background-color: turquoise;
   position: absolute;
   z-index: -1;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
}
</style>
</head>
<body>
<div>What is ASP.NET?</div>
<p>ASP.NET is a web application framework developed and marketed by Microsoft to allow programmers to build dynamic web sites............</p>
<div>
</div>
</body>
</html>

Output

Following is the output for the above code −

Example

Let’s see another example of the 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">Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies. <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 −

AmitDiwan

Published on 08-Jan-2020 11:10:22

Previous Page Print Page