Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design by Richard York; ISBN: 9780764576423
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
 
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 6th, 2005, 07:41 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default Position: relative;

Richard, on the book you say: "Unlike in absolute positioning, relatively positioned elements are not removed from the flow of a document", but it seems that they are taking of the flow of the document in a way because any element that came after it will not be afected by the reposition of it, like pushing downward.
On the following example I have 4 divs, you will see that the second has position: relative, and I have given a value for top big enough to make it overlap with the divs that came after it, so is it or is it not take out of the flow? Is my understanding of "taken out of the flow" wrong?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
div#id1 {
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(178,178,178)
}
div#id2 {
    background: lightblue;
    position: relative;
    top: 50px;
    left: 30px;

}
</style>
</head>
<body>
<div id="id1">
    First div

</div>
<div id="id2">
    Second div
</div>
<div id="id3">
    Third div
</div>
<div id="id4">
    Fourth div
</div>
</body>
</html>
Christian
__________________
Christian
  #2 (permalink)  
Old April 7th, 2005, 09:28 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Right, relatively positioned elements do not leave the flow of the document, because they continue to affect the surrounding content. They can however be controled with the z-index property and the offset properties.

Think of it this way.. when you give an element relative positioning, it creates a clone of itself where it originally appeared in the document. Its dimensions still occupy that original space, eventhough you can move it about with the offset properties and control layering with the z-index property.

Absolute positioning causes an element to completely leave the flow of the document, there is no clone.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
  #3 (permalink)  
Old April 7th, 2005, 11:22 AM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for the analogy, I think I now understand how the relative positioning works.

Christian
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
relative size query noam Access 4 December 12th, 2005 06:00 PM
pivot table not relative thelos Excel VBA 4 September 9th, 2005 02:44 AM
Relative URLs? groupmatch BOOK: ASP.NET Website Programming Problem-Design-Solution 21 December 16th, 2004 10:53 AM
position 2 relative <div> in switched order Kabe CSS Cascading Style Sheets 4 November 24th, 2004 12:34 PM
HELP with relative paths in FileSystemObject stalker Javascript 5 September 4th, 2003 02:38 PM



All times are GMT -4. The time now is 06:56 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.