1. Computing

Discuss in my forum

CSS Positioning Properties

CSS Properties You Can Use to Position Elements on the Page

By

CSS Positioning: Two Models Float and Position

There are two models for positioning your content on your Web pages. Both are valid, but when you're going to lay out your Web pages with CSS it's best to choose one of the two models and use that one exclusively for positioning.

float
The float property takes the element out of the normal flow of the Web page and has all other elements flow around it. Using CSS float for layout can seem confusing at first, but once you understand how it works it can be very satisfying. You only need to learn the one CSS property to set the layout for all your pages.

Float is part of CSS 1, and has browser support back to version 4 for IE and Netscape.

position
Position is the CSS property that most people think of when they think CSS positioning. This property defines whether the element is in a static, relative (to the parent), absolute, or fixed position. Once you've set how the element will be positioned with the position property, then you define the exact location with other style properties.

Position is part of CSS 2, and has browser support back to version 4 for IE and Netscape.

CSS Position Properties to Define the Exact Location

As I mentioned above, if you decide to position your pages with the position property, then you need to use at least one more style property to define exactly where the elements will be placed on the page.

bottom
Position the element some location up from the bottom of the browser window or parent element bottom (depending upon how you positioned it - relative, absolute, static, or fixed). One thing to note: if you use negative values on these positions, you move the element in the opposite direction, but still from the same location. In other words, a negative top value would move the element up, above the top of the parent element.

Bottom is part of CSS 2, and has browser support back to IE 5 and Netscape 6.

left
Position the element over from the right side of the browser window or parent element.

Left is part of CSS 2, and has browser support back to IE 4 and Netscape 4.

right
Position the element over from the right side of the browser window or parent element.

Right is part of CSS 2, and has browser support back to IE 5 and Netscape 6.

top
Position the element down from the top of the browser window or parent element.

Top is part of CSS 2, and has browser support back to IE 4 and Netscape 4.

Because of the browser support, most designers position from the top and left, rather than the bottom or right.

CSS Positioning Isn't Really Alignment

When HTML first came out there weren't a lot of ways to position items on the screen. One of the few was the align attribute which allowed you to position the element relative to its current location. This attribute has been deprecated, in favor of style sheets, but there isn't a 1-to-1 style property to do the same thing as the align attribute. Instead you have two attributes one of which only works for text:

text-align
Text-align does all the things you would expect of an align attribute. It will center text, right align it, even justify it. But it only works for text. Centering other elements is a bit trickier.

Text-align is part of CSS 1, and has browser support back to IE 4 and Netscape 4.

vertical-align
Vertical-align allows you to align an inline element to the baseline, top, middle, bottom, and several other positions relative to the current line of text.

Vertical-align is part of CSS 1, and has browser support back to IE 4 and Netscape 4.

Position Things On Top of One Another

When you're positioning elements, there is a chance that one will overlap the other. In the normal course of events, the browser simply puts whatever came first at the bottom of the stack. But with the z-index property you can push your elements to other locations.

z-index
Z-index defines the stack order of your elements. Elements with a higher stack order will be higher in the stack.

Z-index is part of CSS 2, and has browser support back to IE 4 and Netscape 6.

Once You've Got them Positioned, Give the Elements a Shape

There are two properties you can use to define the exact shape of your elements (well, to some extent). The content that is in the element is then clipped to fit the shape, and any overflow is handled by the overflow property.

clip
Clip defines the shape of the element. This usually amounts to the height and width of a rectangle you want on your page. Any content that is longer than that space will be clipped.

Clip is part of CSS 2, and has browser support back to IE 4 and Netscape 6.

overflow
Overflow tells the browser what to do with any content that doesn't fit in the clipped area. You can hide the content, have it continue on as usual (essentially ignoring the clipping), or set scroll bars to appear.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. Advanced CSS
  6. CSS Positioning
  7. CSS Positioning Properties - CSS Properties You Can Use to Position Elements on the Page

©2014 About.com. All rights reserved.