Absolute Question
in [CSS]
|
Prev: Going Live
Next: Q: How do I create a "snaking-column"?
From: dorayme on 16 Apr 2010 04:38 In article <hq93n4$cl4$1(a)news.eternal-september.org>, Gus Richter <gusrichter(a)netscape.net> wrote: > On 4/15/2010 7:36 PM, Mike wrote: > > Hello, > > Why is id= two relative to the corner of the "centerthis" div but > > id=three is not? > > The other respondent is right about the first character needing to be a > letter: > <http://www.w3.org/TR/html4/types.html#type-name> > > Explaining the 'why': > .Centerthis is the container and its position is "static". > The two divs in question are positioned "in-flow" to the static div. > That means they are stacked on top of each other right under .one > Position:absolute; does nothing until repositioning occurs. > #two is then vertically repositioned with top:100px; relative to the > initial containing block (body for simplicity) because the container > .Centerthis is "Static" (not 'absolute', 'relative' or 'fixed'). > The same as #three with top:200px; > <http://www.w3.org/TR/CSS21/visudet.html#containing-block-details> > > Note that the repositioning is relative to body which can be verified by > giving position:relative to .Centerthis which results in the vertical > positioning to be relative to the .Centerthis container - #two and > #three will be shifted further down. > > #three also has left:200px; applied to it resulting in it being > repositioned horizontally relative to body, the initial containing block > - 200px from the leftmost edge of body. > > If position:relative; is applied to .Centerthis the repositioning of > #three will be relative to the .Centerthis containing block - 200px from > the leftmost edge of .Centerthis With absolute positioning where there is no positioned ancestor to the element being absolutely positioned, it is only an illusion that it is positioned with respect to body. The body element might happen to be roughly there in the default top left position of viewport (if it is not down at the pub after a hard day containing its children and grandchildren). But if body were given a left and top margin and say a border, you will find that an absolutely positioned child (to take an example) is not positioned with respect to it. For example, if the child is top: 0 and left: 0 and has a short sentence in it and body is margin-top: 400px and margin-right: 400px, the child will not be within cooee of being within the borders of body. If one positions the body with a position: relative, this changes the situation but the point is that body is not a *positioned ancestor* of its contained elements. I said things about this in an earlier post. -- dorayme
From: Thomas 'PointedEars' Lahn on 16 Apr 2010 08:22 Gus Richter wrote: > Mike wrote: >> Why is id= two relative to the corner of the "centerthis" div but >> id=three is not? > > The other respondent is right about the first character needing to be a > letter: > <http://www.w3.org/TR/html4/types.html#type-name> Yet another respondent, I do have a name. > Explaining the 'why': > .Centerthis is the container and its position is "static". > The two divs in question are positioned "in-flow" to the static div. > That means they are stacked on top of each other right under .one > Position:absolute; does nothing until repositioning occurs. > #two is then vertically repositioned with top:100px; relative to the > initial containing block (body for simplicity) because the container > .Centerthis is "Static" (not 'absolute', 'relative' or 'fixed'). > The same as #three with top:200px; > <http://www.w3.org/TR/CSS21/visudet.html#containing-block-details> You want to re-read that more carefully. | The containing block in which the root element lives is a rectangle called | the /initial containing block/. For continuous media, it has the | dimensions of the viewport and is anchored at the canvas origin; it is the ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ | page area for paged media. The root element is `HTML' in HTML, and `html' in XHTML. The BODY/body element, however, usually has default margins to the borders of its parent root HTML/html element, while the root element usually has no default borders to the initial containing block. So the BODY/body element is only considered the containing block if it has a `position' property value different from `static', and it is never considered the initial containing block. PointedEars -- Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network. -- Tim Berners-Lee
From: Mike on 16 Apr 2010 09:37 On Apr 16, 4:38 am, dorayme <dora...(a)optusnet.com.au> wrote: > In article <hq93n4$cl...(a)news.eternal-september.org>, > Gus Richter <gusrich...(a)netscape.net> wrote: > > > > > > > On 4/15/2010 7:36 PM, Mike wrote: > > > Hello, > > > Why is id= two relative to the corner of the "centerthis" div but > > > id=three is not? > > > The other respondent is right about the first character needing to be a > > letter: > > <http://www.w3.org/TR/html4/types.html#type-name> > > > Explaining the 'why': > > .Centerthis is the container and its position is "static". > > The two divs in question are positioned "in-flow" to the static div. > > That means they are stacked on top of each other right under .one > > Position:absolute; does nothing until repositioning occurs. > > #two is then vertically repositioned with top:100px; relative to the > > initial containing block (body for simplicity) because the container > > .Centerthis is "Static" (not 'absolute', 'relative' or 'fixed'). > > The same as #three with top:200px; > > <http://www.w3.org/TR/CSS21/visudet.html#containing-block-details> > > > Note that the repositioning is relative to body which can be verified by > > giving position:relative to .Centerthis which results in the vertical > > positioning to be relative to the .Centerthis container - #two and > > #three will be shifted further down. > > > #three also has left:200px; applied to it resulting in it being > > repositioned horizontally relative to body, the initial containing block > > - 200px from the leftmost edge of body. > > > If position:relative; is applied to .Centerthis the repositioning of > > #three will be relative to the .Centerthis containing block - 200px from > > the leftmost edge of .Centerthis > > With absolute positioning where there is no positioned ancestor > to the element being absolutely positioned, it is only an > illusion that it is positioned with respect to body. > > The body element might happen to be roughly there in the default > top left position of viewport (if it is not down at the pub after > a hard day containing its children and grandchildren). But if > body were given a left and top margin and say a border, you will > find that an absolutely positioned child (to take an example) is > not positioned with respect to it. For example, if the child is > top: 0 and left: 0 and has a short sentence in it and body is > margin-top: 400px and margin-right: 400px, the child will not be > within cooee of being within the borders of body. > > If one positions the body with a position: relative, this changes > the situation but the point is that body is not a *positioned > ancestor* of its contained elements. I said things about this in > an earlier post. > > -- > dorayme- Hide quoted text - > > - Show quoted text - One thing I dont understand completely This: h3 { position: relative; / So that elements INSIDE this header can be positioned relative to the header / } this is stating that the relative declaration is pertaining to the children of this not itself. Which seems to work. But why? Doesnt a rule apply to itself?
From: Thomas 'PointedEars' Lahn on 16 Apr 2010 10:21 Mike wrote: > One thing I dont understand completely > This: > h3 { > position: relative; / So that elements INSIDE this header can be > positioned relative to the header / .... is a syntax error. > } > > this is stating that the relative declaration is pertaining to the > children of this not itself. No, but it is an insufficient explanation. > Which seems to work. But why? Doesnt a rule apply to itself? If you declare `position: relative' for the H3 element it is positioned relative with regard to its containing block (although that is irrelevant to display if it has not one of the `left', `top', `right', `bottom' properties declared), and its serves as the containing block for its positioned descendent elements. Please trim your quotes to the relevant minimum. PointedEars -- Danny Goodman's books are out of date and teach practices that are positively harmful for cross-browser scripting. -- Richard Cornford, cljs, <cife6q$253$1$8300dec7(a)news.demon.co.uk> (2004)
From: Rob W. on 16 Apr 2010 13:25
Op 16-4-2010 14:22, Thomas 'PointedEars' Lahn schreef: > > The root element is `HTML' in HTML, and `html' in XHTML. > Eh, in the pages that I work with the root element in HTML is 'html' (no caps). Would you mind explaining the difference or the possible negative effects? -- rob w |