myspaceprodesigns.com
css positioning
- bookmark us
- add me on myspace
- add me on xuqa
- add me on yfly
10/15/2007 05:59 AM
Re: HELP!!
10/14/2007 05:39 PM
Re: HELP!!
css positioning
There are four types of positioning that can be used with CSS2. In this tutorial, we will look at each of the types, what they do, and how to use them.
Static Positioning
Let's start with the most basic positioning. That's a position we call "static." Basically static positioning is no positioning and the content of statically positioned elements fall with the normal flow of the document. An example of static positioning on this page can be found with this text. Generally, we do not signify that an element has static positioning unless it is written to override the positioning set by another element or parent element. Take a look at our example on static positioning. You will see that it falls exactly where it should.
Absolute Positioning
The next type of positioning that is probably most often used is abolute positioning. On this page, an example of absolutely positioned elements are the links to the site map and alternate style sheets in the header. Though they are nested in the parent div, the div which contains those links is positioned absolutely 150px to the left and 85px down from the top left of the #header container div. What this means is that as the browser is scrolled or the #header div is moved, the div which contains those links will always be positioned at the same place within the #header div. Here is our example on absolute positioning. You will notice that as the browser is scrolled the div also moves and remains affixed to the same place in the body of the document.
Relative Positioning
Another common use of positioning involves relative positioning. Relative positioning is basically offsetting the element a given distance from where it would have normally (or statically) appeared. We use relative positioning on this page in the headers where it says "Advanced CSS" and "Understanding Positioning." Those elements are positioned relative to where they would normally appear because of spacing issues that occur on a cross-browser level with header tags. However, by using relative positioning, we are able to keep their spacing correct. A simpler example can be found on our relative positioning page. In that example we merely shift the contents left and down by 20px.
Fixed Positioning
The final type of positioning we can use is fixed positioning. Internet Explorer 6 and under does not support this property and, though we would love to, we are not using this on the main pages of this website for this very reason. Fixed positioning basically tells our browser that an element will always appear at a certain point in the window of the browser, no matter where we are on the page. If you are using something other than IE, you can see this at work in our example on fixed positioning. As you scroll the browser around, you will see that the div remains in the same spot. IE defaults fixed positioning to static positioning.
Comments
View Comments (0) • Leave Comment • Support Forum