• Home
• CSS Overflow Example
• Block Elements
• Button Generators
• Color Codes
• Levels
• Menus
• About CSS Stylesheets

• Background Images
• Positioning
• CSS templates

CSS Positioning

In order to create the site you want, Web Design with CSS is a very good alternative. One of the most important things to know about Web Designing with CSS is CSS positioning that allows the Web designer to position an element anywhere within the site’s page. The CSS positioning also allows the web designer to place the item on a particular position chosen by him, using different and needed coordinates. The moved objects in CSS designing can also be positioned on different CSS layouts, one above the other.

Some of the most common positioning methods that are included in every CSS developing program are: the static position, fixed positioning, absolute positioning, relative positioning and three dimensional positioning. Both absolute positioning and the relative positioning use left and top properties of placing the items expressed in pixels, inches, points, percentages and centimeters.

Static positioning is the standard value that is assigned to an element when placed within the site’s page.

The fixed positioning allows any element with this property to float individually from all the others. The element will float in the same position even when scrolling with the mouse over it. Using the fixed positioning style you can overlap many elements and all the other will behave as just the fixed one is not there.

The absolute CSS positioning style places the object in the exact location in the top left of the page. Using this positioning style you are able to create an individual item from other elements on that page or other similar pages. The object that needs placing can be anything from text, image, hyperlink or multimedia object such as video or sound.

The relative positioning is the position of the item that is normally occupied after previous elements and before the next ones. The element can be modified from this position only using left and top properties.

The three-dimensional positioning allows elements to be placed on a two-dimensional surface, as we are talking about an internet page but they also can be placed one above the other in a stack using the z index starting from 0. The element with the highest index is placed on top of all others.