Position(Absolute and Relative)
 |
| Position Absolute Relative |
Absolute and Relative.
Absolute position is determined from very top left of the browser.
Example: 1
<html>
<head>
<style>
</head>
<body>
<h2>This is absolute, different position </h2>
<p>This is absolute, different position </p>
</body>
</html>
<head>
<style>
h2 {
position: absolute;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
p {
position: absolute;
top: 50px;//50 pixels down from the top
left: 100px;//100 pixels right from the left
}
</style>position: absolute;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
p {
position: absolute;
top: 50px;//50 pixels down from the top
left: 100px;//100 pixels right from the left
}
</head>
<body>
<h2>This is absolute, different position </h2>
<p>This is absolute, different position </p>
</body>
</html>
Output
This is absolute, same co-ordinate
This is absolute, same co-ordinateIf we place two elements in the same location, i.e. same co-ordinate, elements will be overlapped. Lets see following example:
Example: 2
<html>
<head>
<style>
</head>
<body>
<h2>This is absolute, same co-ordinate </h2>
<p>This is absolute, same co-ordinate </p>
</body>
</html>
<head>
<style>
h2 {
position: absolute;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
p {
position: absolute;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
</style>position: absolute;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
p {
position: absolute;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
</head>
<body>
<h2>This is absolute, same co-ordinate </h2>
<p>This is absolute, same co-ordinate </p>
</body>
</html>
Output
This is absolute, same co-ordinate
This is absolute, same co-ordinateAbsolute positioning says "I am going to give you complete control over where place your element, I don't care if any other elements is in my place, I don't care any other text in my way. If is it, I overlap, I only care myself.
In this case, we have to apply “relative” attribute.
Relative position is determined from elements current position of the browser.
Example: 3
<html>
<head>
<style>
</head>
<body>
<h2>This is absolute, same co-ordinate </h2>
<p>This is relative, same co-ordinate </p>
</body>
</html>
<head>
<style>
h2 {
position: absolute;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
p {
position: relative;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
</style>position: absolute;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
p {
position: relative;
top: 20px;//20 pixels down from the top
left: 50px;//50 pixels right from the left
}
</head>
<body>
<h2>This is absolute, same co-ordinate </h2>
<p>This is relative, same co-ordinate </p>
</body>
</html>
Output
This is absolute, same co-ordinate
This is absolute, same co-ordinateNow the text move away where I want.
No comments:
Post a Comment