Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with CSS Positioning

In this article I will cover the concept of CSS Positioning elements. The article will explain the Absolute Positioning, Fixed Positioning, Relative Positioning and Overlapping.

Introduction:

This tutorial will discuss different types of positioning available with CSS. The article will cover that how to position your HTML elements in different ways on your page

If you want to learn more about CSS / CSS 3, check out this online course.

Description:

CSS positioning is amazing tool for web a developer which enables them to manipulate the exact position of HTML elements. Basically CSS property allows them to position their HTML elements.

CSS property allows us to position elements using Top, Bottom, Right, Left property. It can also place an element behind another element and describes what would happen when size of an element is large or is outside the window.

Each HTML element can be positioned with one of the left, right, top and bottom properties which defines a distance between the present element and either the next element or the parent's border depending on the position property settings.

CSS positioning can be done in various ways. Mostly there is four type of CSS positioning available as listed below:

Relative Positioning:

Relative positioning changes the position of the HTML element relative to its normal position. This kind of positioning determines the position of element with respect to its position in the normal document, you can define offset by the four setting i.e. Top, Bottom, Left, Right.

Listed example explains how to position your element relatively:

Listing 1: Script of Relative Positioning

<html>
<head>
<Title>Mrbool Tutorials - Relative Positioning</Title>
<style>
h3 { 
	position: relative; 
	top: 10px;
	left: 160px;
}
p { 
	position: relative; 
	left: -10px;
	}
</style>
</head>
<body>
<h3>H3: Example of Relative Positioning.</h3>
<p>P: This is paragraph content with Relative positioning.</p>
</body>
</html> 
Positioning script which explains how to position html element relatively

Figure 1: Positioning script which explains how to position html element relatively.

This is important to note that script defines four directions (left, right, up, and down) using only two (left and top). Relative positioning moves stuff from where it would normally be. So if you had a paragraph in the middle of a page and you made both the top and left values negative 100, then the paragraph would move to up and the left, 100 pixels from its normal location.

  • Left positioning - Use a negative value for left.
  • Right Positioning - Use a positive value for left.
  • Move Up - Use a negative value for top.
  • Move Down - Use a positive value for top.

Absolute Positioning:

In absolute positioning, we define exact pixel for html element where it will appear. This starts from the top left of the parent element. For example if you had a bold tag in a paragraph tag, the parent of the bold tag would be the paragraph.

Since the paragraph tag is our parent element, we need to decide where we want our bold tag to appear in regard to the top left of the paragraph. Following script will take left 30 pixel and top 50 pixel.

Listing 2: Script of Absolute Positioning

<html>
<head>
<Title>Mrbool Tutorials - Absolute Positioning</Title>
<style type="text/css">
h2
{
position:absolute;
left:30px;
top:50px;
}
</style>
</head>
<body>
<h2>H2: Example of Absolute Positioning. </h2>
<p>P: This is paragraph content without any positioning.</p>
</body>
</html> 
Absolute positioning script

Figure 2: Absolute positioning script

Fixed Positioning:

Instead of normal position of HTML element, an element with fixed position is positioned relative to the browser’s window and you can’t move even if window is scrolled. Following listed script will clear the concept of fixed positioning.

Listing 3: Script of fixed positioning

<html>
<head>
<Title>Mrbool Tutorials - Fixed Positioning</Title>
<style type="text/css">
p.pos_fixed
{
position:fixed;
bottom:200px;
left:3px;
}
</style>
</head>
<body>

<p class="pos_fixed">This is left bottom content</p>

<p>This is Fixed Positioning Tutorial</p>
<p>This is Fixed Positioning Tutorial</p>
<p>This is Fixed Positioning Tutorial</p>
<p>This is Fixed Positioning Tutorial</p>
<p>This is Fixed Positioning Tutorial</p>
</body>
</html> 
Fixed positioning relative to browser window

Figure 3: Fixed positioning relative to browser window.

Static Positioning:

This is by default positioning property. In this case HTML element is always positioned according to the normal flux of the page.

In description section of CSS positioning we mentioned a line that “an element size is large or outside the window,” here is the explanation for it : they can overlap other elements. Following listed script will clear the concept.

Listing 4: Script of overlapping elements positioning.

<html>
<head>
<Title>Mrbool Tutorials - Overlapping</Title>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>H1: Example of Overlapping.</h1>
<img class='imagem_artigo' src="http://mrbool.com/portal2/mrbool_img/logo.jpg"  />

</body>
</html> 
Script which explain what would happen if element overlaps another element

Figure 4: Script which explain what would happen if element overlaps another element.

There is z-index property in CSS positioning section which describes the sequences of an HTML element. An HTML element can have a +ve and -ve value which decides whether element would be behind or in front.

Conclusion

We have covered every all basic concept related to CSS positioning. I would suggest that take a scenario based example and explore all the above concepts and if you get any questions, please comment at Mrbool website.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login