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
Selected Reading
Absolute Positioning Using CSS
We can define positioning of an element in CSS as absolute which renders the element relative to the first positioned (except static) parent. Elements with positioning method as absolute are positioned by CSS Positioning properties (left, right, top and bottom).
The position property has the following values −
static
relative
fixed
absolute
sticky
Here is how we position an element with absolute positioning, relative to the first positioned parent −
We need to set absolute positioning. For that, use the position property −
position: absolute;
Positioned Elements as Absolute
Example
In this example, we have postioned the paragraph tag as absolute −
<!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>Demo text</div>
<p>ICC is International Cricket Council is the governing body of Cricket founded in 1909........</p>
<div>
</div>
</body>
</html>
Positioned Elements as Absolute, Relative and Fixed
Example
In this example, we have shown how elements are positioned using the position property in CSS −
<!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">MySQL is the most popular Open Source Relational SQL Database Management System.
MySQL is one of the best RDBMS being used for developing various web-based software applications. <mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>
Updated on: 2023-10-27T14:03:17+05:30
709 Views
Advertisements