Website Design United States, Website Design California, Website Designing United States, Website Designing California

CSS 'Position' Property

These routines show you how to programmatically convert a VB6 .VBP file to a VB5 .VBP file... by removing two tags that VB6 requires and that VB5 can't handle.

If you're not familiar with Cascading Style Sheets (CSS) and you make an attempt to jump right into its "position" element you may get a little confused. You have your choice of static, absolute, relative, and fixed. So what's the difference between them? In this article we're going to discuss them but we'll mainly focus on Absolute and Relative.

The W3C has been handling CSS standards for quite a while now and section 9.3 of the CSS Level 2 Specifications is all about Position Schemes. It's actually in this section (subsection 9.3.1) that we want to look at. It deals with the 'position' property and defines how static, relative, absolute and fixed are used.
Static

The initial setting for the 'position' property is static. This means that if you declared a div with CSS and did not include position: xxx; that it's value would be static. So these two declarations would be the same:

#one{
position: static;
margin: 0;
padding: 0;
background: transparent;
color: #000;
}

#two{
margin: 0;
padding: 0;
background: transparent;
color: #000;
}

A static box is a normal box that follows the normal flow. This means that the left and top properties would not come into play. If you used the two ids we set above (#one and #two) and laid them out in a web page they would follow the normal flow. So if we had:

<div id="one"> Text for div one </div>

<div id="two"> Text for div two </div>

The text on the web page might look like so:

Text for div one
Text for div two

If we changed them around:

<div id="two"> Text for div two </div>

<div id="one"> Text for div one </div>

The text on the web page might look like so:

Text for div two
Text for div one

In the 1st example the text in div #one is shown first on the page because it was declared first in the HTML code for the page. In the 2nd example the text for div #two is shown first because it was declared 1st in the HTML code for the page. This is the "normal flow". Items declared 1st are shown first when using the 'static' value.
Fixed

The 'fixed' value is almost not even worth talking about. Microsoft Internet Explorer seems to wring the life out of this value and almost never gets it right. Much like the 'absolute' value, 'fixed' uses top/bottom and left/right values to determine it's position with respect to it's containing block. However the difference between 'absolute' and 'fixed' is that a 'fixed' position means that the box would not move when scrolled. Think of this like having a fixed background image on a web page. When you move the scrollbar the image stays in one place. This is suppose to be how the 'fixed' value works, but IE still seems to render this incorrectly on many machines.
Absolute

The 'absolute' value differs from the rest because when you use it you actually remove the box from the normal flow by using the top, bottom, left and/or right properties. Remember the example above with our two divs (#one and #two)? If we set div #two to have a position: absolute and then set the top and left properties to 0, we would actually have placed div #two on top of div #one. The result would be two lines of text on one line:

Absolute Image Example
Figure 1
Relative

The 'relative' value seems to cause a few problems for people the first time they encounter or use it. Like the 'absolute' value it too can rely on the top/bottom, left/right properties to position the box. However unlike the 'absolute' value 'relative' does not remove the box from the normal flow.

When you set the 'relative' value and use (for example) a top value you'll be positioning the box relative to it's normal flow. This probably can best be shown by example. Let's assume we have our two divs again, #one and #two, with the following settings:

#one{
position: static; /* although we don't need this line */
margin: 0;
padding: 0;
background: #abc;
color: #000;
}

#two{
position: relative;
top: 50px;
left: 0;
margin: 0;
padding: 0;
background: #789;
color: #000;
}

Now in our web page code we have:

<div id="one"> Text for div one </div>

<div id="two"> Text for div two </div>

And the result:

Relative Image Example
Figure 2

The red line and the 50px were added to show you that there's a space between the two divs of 50 pixels. This is to show you that even though we have not added any padding, margin, line breaks or any other code the two divs are separated by 50 pixels because we're positioning the second div (div #two) relative to its normal flow.

It's important to note though that the 'relative' value can be a little trouble some at times. If you're not careful how you use it and compensate with other properties the normal flow may not look so normal. For example I've added the two divs to the top of this article as I wrote it. The order of the divs in the code are: div #one, div #two and then the div that contains this article. Look at what happens:

Relative Image Example
Figure 3

If we were to remove the 'relative' value from div #two (let it be static) and keep the same order we would have different results:

Relative Image Example
Figure 4

You may notice that in Figure 3 the 'space' between the div with "Text for div one" and the top of the box in grey (the div with a portion of the text reading "CSS") is just enough space for the div #two ("Text for div two"). If not, look at Figure 4 and you'll notice what I'm talking about. Why does this happen?

The second div (div #two) should be just below div one (div #one) when you look at the HTML code. We had it in this order:

<div id="one"> ... </div>
<div id="two"> ... </div>
<div id="content"> ... </div>

The normal flow allots for the space of div #two but then displays it down 50 pixels from it's original normal flow position. However div #content is there so the information from div #two shows over it. This is something we need to be careful of when using the 'relative' value for position.


WEB DESIGN INDIA
42 B Malviya Nagar , New Delhi-110017

Skype: manmeetsi
Email: support.webdesignindia@gmail.com
Tel: 91-011-40502005, 9810067295

 















 


© 2008-2009 dotnet4all.com