Re: [css-d] [+] Re: [css-d Is this proper use of div tags?

[Thierry Koblentz]

Hi Alan,

> The article fails to mention about how position:relative can generate a
> new containing block for descendants elements with a position value of
> either absolute or fixed.

I believe this is true for "absolute", but not for "fixed" as for the latter
the reference is the viewport.

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] [+] Re: [css-d Is this proper use of div tags?

[Alan Gresley]

On 19/11/2010 4:37 AM, Thierry Koblentz wrote:

Hi Tim,


The red
box *and* the document have nothing to do with the offset of that
box.


Not entirely true.  Yes, the blue box is offset in relation to where it
would be without position.  But "where the blue box would be" depends
directly on other elements (previous siblings and parents, i.e, the red
box, and the document).  and since we're only changing the left
position, the only thing that affects that is the document, making the
"offset in relation to the document" a fair statement.


I don't think you can "explain" relative positioning that way, because
that's true for any positioning value, but fixed.

The offset (200px in that example [1]) is not in relation to the document.


Example [1]. I'm lost.


If it was the case, a left-margin or a left padding on the reddish box
should have no effect on the blue box. If such styling has an effect on the
box, it is because that blue box is offset from *its* normal position in the
flow.


It's normal position is it's static position.


*its* position, not the position of siblings, or document, etc. That's
the reference point for the 200px, nothing else.

[1] http://www.alistapart.com/d/css-positioning-101/example_d.html


An interesting thing about this test is that if a margin is given to the 
blue box, only the margin-top and margin-left changes things with the 
current height and width of the red box.


A value of margin-left: 100px visually shifts the blue box to the right 
from it's static position by 100px.


A value of margin-top: 100px collapses through into it's parent being 
the red box. The red box is pushed down by 100px. The blue box is 
positioned on the same y-axis as the red box.


The red box physical height is due to the height of it's content, that 
being the blue box. If no height is given on the red box, then for the 
blue box, a value of margin-bottom: 100px collapses through into it's 
parent being the red box. The yellow box is then pushed down by 100px.


A value of margin-right: 100px has little affect but this is also true 
with a value of margin-right: 5000px since it can only disappear into 
the overflow on the right. Margins are clipped inside boxes that behave 
as overflow:auto.


The article fails to mention about how position:relative can generate a 
new containing block for descendants elements with a position value of 
either absolute or fixed.


A also not one of the comments.

  | "I never realized quite how redundant the CSS spec is.
  | The final two lines of this selection are almost insultingly
  | pointless and unhelpful."

CSS can only be redundant if you do not use it. The commenter quotes 
this as the final two lines.


  | “Boxes in the normal flow belong to a formatting context,
  | which may be block or inline, but not both simultaneously.
  | Block boxes participate in a block formatting context. Inline
  | boxes participate in an inline formatting context.”

A block formatting context is a very misunderstood concept of CSS.


--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] [+] Re: [css-d Is this proper use of div tags?

[Thierry Koblentz]

Hi Tim,

> > The red
> > box *and* the document have nothing to do with the offset of that
> > box.
> 
> Not entirely true.  Yes, the blue box is offset in relation to where it
> would be without position.  But "where the blue box would be" depends
> directly on other elements (previous siblings and parents, i.e, the red
> box, and the document).  and since we're only changing the left
> position, the only thing that affects that is the document, making the
> "offset in relation to the document" a fair statement.

I don't think you can "explain" relative positioning that way, because
that's true for any positioning value, but fixed.

The offset (200px in that example [1]) is not in relation to the document.
If it was the case, a left-margin or a left padding on the reddish box
should have no effect on the blue box. If such styling has an effect on the
box, it is because that blue box is offset from *its* normal position in the
flow. *its* position, not the position of siblings, or document, etc. That's
the reference point for the 200px, nothing else. 

[1] http://www.alistapart.com/d/css-positioning-101/example_d.html

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] [+] Re: [css-d Is this proper use of div tags?

[Climis, Tim]

> The red
> box *and* the document have nothing to do with the offset of that
> box. 

Not entirely true.  Yes, the blue box is offset in relation to where it would 
be without position.  But "where the blue box would be" depends directly on 
other elements (previous siblings and parents, i.e, the red box, and the 
document).  and since we're only changing the left position, the only thing 
that affects that is the document, making the "offset in relation to the 
document" a fair statement.

The thing that's missing, and should have been pointed out, is that if we added 
an older sibling, the blue box would not be in the same place.   Although, 
since this article appears to assume that we're working with non-floated block 
elements, it would only move down, and not over.

Actually, now that I think about it, if there were a floated sibling, it 
wouldn't have any effect on the flow, since floats are out of the flow... which 
means that the only way to make the box move further to the left is by moving 
the document further to the left (with either position or margin).  Thus the 
box still ends up in relationship to the document.  It only breaks down when 
you use a top offset.

---Tim

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] [+] Re: [css-d Is this proper use of div tags?

[Thierry Koblentz]

> Example D
> 
> shows our new markup. Because of the new coordinate system, the
> blue  
> block measures its offset 200 pixels from the left of the red block
> (|#box_1|) instead of the document.
> 
> Yes, and by placing #box_2 as a child of #box_1, it's default position
> within the flow changes. Because it shares a y-coord in common with
> #box_1, it shows up as adjacent to #box_1, as Example D clearly
> indicates. Perhaps is wording isn't the best, but the example supports
> his logic.

Copying your post: "the blue block measures its offset 200 pixels from the
left of the red block (|#box_1|) instead of the document." The red box *and*
the document have nothing to do with the offset of that box. Imho, the
example should not demo his logic, but rather how things work... 

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/