Wrox Programmer Forums
|
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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 6th, 2005, 07:41 PM
Friend of Wrox
 
Join Date: Jun 2004
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
 
Old April 7th, 2005, 09:28 AM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
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
 
Old April 7th, 2005, 11:22 AM
Friend of Wrox
 
Join Date: Jun 2004
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





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





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.