WebReference.com - Part 2 from Chapter 11 of Cascading Style Sheets A Beginner's Guide, from Osborne/McGraw-Hill (2/5)
   [previous] [next] |
CSS: A Beginner's Guide
Relative Positioning
Perhaps where people learning CSS most often become confused is in understanding relative positioning and how it relates to absolute positioning. Again, it's really not that difficult. As with absolute positioning, you are specifying the location of the top-left corner of an element's box. However, this time your point of reference is different. A box is relatively positioned when you specify its location in relation to where it would normally occur on the page. Remember "static" positioning? Elements are positioned according to the normal flow of the document. With relative positioning, you are moving those elements around, starting from where they would normally occur. For example, in the following illustration you will see the first heading and paragraph are positioned "statically" or, in other words, where they would normally go. The second heading also is in its natural place on the page; however, the second paragraph has been given a position value of "relative," a top value of -25px, and a left value of 50px. Notice how the paragraph has moved up and to the right and how it now slightly overlaps the heading.
This is because relative positioning uses the element's natural position as a starting point. To see the difference, type in the code that follows and change the position value to "absolute." Now the second paragraph will be at the very top of the page. This is because absolute positioning uses the upper-left corner as its point of reference.
<html><head><title>Relative Positioning</title>
<style>
h1 {background-color: black;
color: white;}
p {background-color: white;
font-size: 1.1em;
margin-right: 25;}
p.relative {background-color: white;
font-size: 1.1em;
margin-right: 25%;
position: relative;
top: -25px;
left: 50px;}</style></head>
<body>
<h1>This is a statically (naturally)
positioned heading.</h1>
<p>This paragraph is also statically
(naturally) positioned.</p>
<h1>This is a statically (naturally)
positioned heading.</h1>
<p class="relative">This paragraph is being
positioned with relative positioning.
Thus, its starting point of reference is not
the upper-left corner of the containing block
(in this case, the browser window). Instead, the
starting point of reference is where this box would
be if no positioning at all had been used.</p>
</body></html>Tip: Although a top-left reference point has been spoken of, it is also possible to work from other points of reference, such as top-right, bottom-left, and so on. However, as you are learning to work with absolute and relative positioning, it is easier to begin working from a single reference point. Then, as you grow accustomed to how positioning works, you can increase the ways in which you apply it.
Fixed Positioning
A fourth positioning scheme is known as fixed positioning. This type of positioning allows you to specify an element's location in the browser window. In addition, that location is identified as "fixed." In other words, while the rest of the page's content scrolls, that box remains where it is. This type of positioning creates a similar effect to what you can do with frames. You can have a logo or, ideally, a navigation bar that remains at the top or side of a page all the time, while other content comes and goes. Unfortunately, at the time of this writing, the fixed positioning scheme is virtually unsupported by the browsers. Thus, you'll have to wait a while before you can make use of it. [First published November, 2001. The latest Opera, Mozilla and Mozilla-based browsers do support fixed positioning. See the W3C's Cascading Style Sheets section for an example. -Ed]
Tip: The easiest way to avoid browser support problems with positioning properties is to use the <div> and <span> elements when you want to position element boxes.
1-Minute Drill
|
[previous] [next] |
Created: July 22, 2002
Revised: July 22, 2002
URL: https://webreference.com/authoring/style/sheets/beginners/chap11/2/2.html
Find a programming school near you