This link has been bookmarked by 135 people . It was first bookmarked on 18 Apr 2007, by Charles Nelson.
-
02 Mar 12
-
23 Dec 11
-
08 Dec 11
-
14 Jul 11
-
17 Jan 11
-
28 Sep 10
-
11 Aug 10
-
20 Apr 10
-
04 Dec 09
-
06 Jul 09
-
04 Mar 09
-
10 Feb 09
-
30 Dec 08
-
A static element isn’t static at all, it moves around as we scroll the page.
-
A relatively positioned element is only relative to itself
-
An absolutely positioned element is not absolute, but relative to some other element.
-
And a fixed element is both absolute and static.
-
So the W3C only scores a batting average of .250? No, they just look at the whole thing from a different perspective: the document.
-
A static element is static within the document flow
-
A relatively positioned element is indeed relative to itself.
-
absolutely positioned element is absolute—with respect to another box—and removed from the flow.
-
fixed element is indeed fixed with respect to the flow.
-
The
positionproperty is not inherited by descendant elements, but we can force inheritance by usingposition:inherit. -
A statically positioned element occurs in a place which is determined by whatever static content precedes it in the markup. We can push it around a bit using
marginorpadding, but it mainly stays in place with respect to the rest of the content. -
The box generated by the element is laid out just as it is for static elements
-
Then the rendered box is shifted horizontally and/or vertically
-
But here’s the tricky part—as far as the rest of the document is concerned, the box is still in its original place!
-
If we move it a large distance, we will leave a hole in the document.
-
It is normally only useful for nudging an element a few pixels or so
-
This means that
position:relativeis utterly useless for things like column layout. -
An element with
position:absoluteis removed from the document flow, which means the rest of the document acts as if the element weren’t there. -
Instead, it could end up layered over other elements, unless we make sure it doesn’t. (Sometimes we want that to happen, of course, for example for pop-ups without JavaScript.)
-
If the element has ‘position: absolute’, the containing block is established by the nearest ancestor with a ‘position’ of ‘absolute’, ‘relative’ or ‘fixed’ ... If there is no such ancestor, the containing block is the initial containing block.
-
the containing block for an absolutely positioned element is the nearest positioned ancestor.
-
The containing block in which the root element lives is chosen by the user agent. (It could be related to the viewport.) This containing block is called the initial containing block.
-
user agent is (in most cases) what we mere mortals call a browser
-
viewport means browser window
-
In other words, we can assume that if there is no positioned ancestor for an absolutely positioned element, the containing block is the document itself.
-
a relatively positioned element becomes the containing block for any absolutely positioned children.
-
If we want to position an element absolutely, but with respect to some other element, all we have to do is make that other element (or a common ancestor) be our containing block. We can now achieve that easily by setting
position:relativeon it. We don’t have to specify any movement at all. The containing block doesn’t move, it just becomes a containing block. Nice and simple, eh? -
In a CSS2-compliant browser, we could specify all four properties to give both the position and the dimensions of our absolutely positioned element. Unfortunately, IE5/6 do not support this, so in the real world, we will often need to specify one vertical position (either
toporbottom) and one horizontal position (leftorright) and then set thewidthproperty and, sometimes, theheightproperty. -
These bugs also apply to values specified as percents. In IE5/6, they do not apply to the dimensions of the containing block, but of the parent block. As we have seen, those can be two very different things. The percentage bugs are also present in Opera, up to and including version 8. They are fixed in Opera 9.
-
I mentioned earlier that absolutely positioned elements are removed from the document flow. They do not affect anything that comes later in the markup; these elements will be laid out as if the absolutely positioned element wasn’t there. This makes absolute positioning virtually impossible to use for a multi-column layout if you also need a full-width footer.
-
-
29 Aug 08
-
04 Aug 08
-
03 Aug 08
-
23 Jul 08
-
24 Mar 08
-
10 Mar 08
-
05 Mar 08
-
31 Jan 08
-
02 Jan 08
elle mLet’s shed some light on the shadowy mysteries of CSS positioning. If your CSS skills are limited or even moderate, you will learn what you need to master positioning—it’s not difficult, once you understand the fundamental ideas behind the concept.
-
20 Nov 07
-
23 Oct 07
-
07 Sep 07
-
18 Jul 07
-
12 Jul 07
rabidgadflyLet’s shed some light on the shadowy mysteries of CSS positioning. If your CSS skills are limited or even moderate, you will learn what you need to master positioning—it’s not difficult, once you understand the fundamental ideas behind the concept.
-
05 Jul 07
-
04 Jul 07
-
07 Jun 07
-
31 May 07
-
26 May 07
-
17 May 07
-
16 May 07
-
Erin the LibrarianDigital Web Magazine - Web Design 101: Positioning
-
12 May 07
-
07 May 07
-
06 May 07
rafaelsteilAny cascading style sheets (CSS) newbie will have heard about it, right? CSS positioning—absolute this and relative that. Perhaps you have some vague idea about what it is, but are afraid to try it yourself.
-
05 May 07
-
01 May 07
-
29 Apr 07
-
26 Apr 07
-
24 Apr 07
-
23 Apr 07
-
Masha du ToitArticle on CSS positioning - part of a web site on CSS design. More theory , not practical examples.
-
22 Apr 07
-
21 Apr 07
-
-
-
20 Apr 07
-
Javier PimientaLet’s shed some light on the shadowy mysteries of CSS positioning. If your CSS skills are limited or even moderate, you will learn what you need to master positioning—it’s not difficult, once you understand the fundamental ideas behind the concept.
-
19 Apr 07
-
18 Apr 07
-
17 Apr 07
-
Craig LeeLooks like required reading for the students. Nice example too.
CSS Positioning tutorial for:dstanton_uf for:macloo for:selfmadepsyche for:gritz for:gigabit delicious
-
-
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.