CSS Position Absolute and Relative with Top, Right, Bottom, Left and Center Positing

CSS Absolute Position Property

With the help of absolute positioning of HTML elements, we can design overlapping content. Overlapping means one HTML element over another HTML element.

By default, if you design two div elements the second div element content will be just below the first div element content, but suppose you need to place the content of second div element over the first element.

For example, you want to put some text over an image then you can position your text over the image with the help of the absolute position.

Example 1 – Absolute Position Property example to place text over an image element

<!DOCTYPE html>
<html>
	<head>
		<style>
			.absoluteDiv
			{
				position: absolute;
				top:72%;
				color: white;
				left:27%;
				text-align: center;
				width:30%;
				font-size:55px;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<img src="android.png" />
			</div>
			<div class="absoluteDiv">
				<p>Android</p>
			</div>
		</div>
	</body>
</html>

In the above code, we apply some CSS Properties to the HTML Elements and set the Absolute Position property to the HTML Elements(div).

Here the text “Android” is overlapped to the android logo image.

CSS Absolute Position Property Example to Place Text Over an Image
Fig.1 – Absolute Position Property Example to Place Text Over an Image

CSS Relative Position Property for Absolute Center

If you using the absolute positioning to the HTML Element without having the relative positioned (parent) Element than it will work with the respect of body tag. This work perfects if there is no element between the body tag and your absolute positioned element.

It is advised to make a parent element with positions relative and then you can easily place the absolute positioned element with the help of top, bottom, left and right.

Example 2 – Absolute and Relative Position with Top Property

<html>
	<head>
		<style>
			.relativeDiv
			{
				position: relative;
				width:300px;
			}
			.relativeDiv img
			{
				width:100%;
			}
			.absoluteDiv
			{
				position: absolute;
				top:40%;
				color: white;
				text-align: center;
				width:100%;
			}
		</style>
	</head>
	<body>
	<div class="relativeDiv">
		<div>
			<img src="technolgy.jpg" />
		</div>
		<div class="absoluteDiv">
			<p>We are changing the world <br />with Technology.</p>
		</div>
	</div>
	</body>
</html>

You have to create a <div> element which is positioned relative inside this <div> element you have to create 2 <div> elements in which you want the second <div> element to be positioned absolute.

In this case the second child <div> element is on top of first child <div> element.

CSS Absolute and Relative Position for Absolute Center
Fig.2 – Absolute and Relative Position Example with Top Property

CSS Position Top, Bottom, Left and Right Properties

CSS Position Top, Bottom, Left and Right Properties is used to specify the position of the HTML Element. For example if you want to placed the HTML Element to the Top than you have to apply value of the top.

Example 3 – CSS Locating Absolute Element with Relative to Parent

<!DOCTYPE html>
<html>
	<head>
		<style>
			.absoluteDiv1
			{
				position: absolute;
				top:0;
				left:5%;
				color: white;
				font-size:40px;
			}
			.absoluteDiv2
			{
				position: absolute;
				bottom: 4%;
				right: 5%;
				color: deepskyblue;
				font-size:40px;
			}
			.relativeDiv
			{
				position: relative;
				width: 375px;
			}
			.relativeDiv img
			{
				width:100%;
			}
			p
			{
				padding:0;
				margin:0;
			}
		</style>
	</head>
	
	<body>
		<div>
			<div>
				<img src="shadedcolor.jpg" />
			</div>
			<div class="absoluteDiv1">
				<p>Google</p>
			</div>
		</div>
		
		<div class="relativeDiv">
			<div>
				<img src="shadedcolor.jpg" />
			</div>
			<div class="absoluteDiv2">
				<p>Google</p>
			</div>
		</div>
	</body>
</html>

You have to create a <div> element which is positioned relative inside this <div> element you have to create 2 <div> elements in which you want the second <div> element to be positioned absolute. And apply the value of top-left and bottom-right as per the requirment.

CSS Position Left Right Top And Bottom Relative to Parent
Fig.3 – Position with Left, Right, Top And Bottom Property Relative to Parent div Element
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress