Re: positioning and sizing an element relatively to any other element

--------------------------------------------------
From: "Tab Atkins Jr." <jackalmage@gmail.com>
Sent: Wednesday, March 17, 2010 7:35 AM
To: "Daniel Glazman" <daniel.glazman@disruptive-innovations.com>
Cc: <www-style@w3.org>
Subject: Re: positioning and sizing an element relatively to any other 
element

> His precise list:
>
> 1) All I want for Christmas is the ability to position a box relative
> to another box that is not the container. Like, say, something like:
> position: relative-to #other_box top-right; top: 0; left: 0;, and then
> the top-left of my box would be aligned to the top-right of
> #other_box. Then I would never have to wrangle with float ever again,
> except when I wanted to have some text spill around a box.

This is principle doable by introducing something like this:
position: selector(...);
So the element will be "anchored" at the first element satisfying
the selector. Technically that is not more significantly difficult 
(expensive) than
position: absolute;

>
> 2) Then while we're at it, I'd really love to be able to specify the
> size of a box (either horizontal or vertical) as being identical to
> another box. Maybe something like: width: #other_box and height:
> #other_box. Tables do this. They did it in 1996. Now it's 2010, and I
> think that this is something we all would love, but without the
> tables. So it's something for you to think about; it would really help
> us out.

flow: "...template..." + flex units.

So that is again about flex units and the flow [1].

>
> 3) Since we're talking about height, it would also be awesome to have
> a way to say "this should be the height of its container but no
> larger". You'd think height: 100% would do that, but no, that seems to
> make the box the height of its content, at least the last time I tried
> it (yesterday). That's OK, though, we love you even though you're
> eccentric, CSS. I think we just need a little something different,
> here.

This is precisely:

height: 1*;  /* take all free space left in container */

so about flex units.

>
> 4) I can't say how much I'd love to be able to vertically center
> something in a box. Some of the less-informed members of this little
> sit-down here might think that vertical-align has something to do with
> vertically aligning things in boxes. But no, no, it doesn't. It was a
> bit of a trick that CSS pulled on us, and we understand that there
> were some reasons, so we're annoyed, but understanding.

This is about flex units again:

width: max-intrinsic;
height: intrinsic;
margin: 1*;

will position the element in the center/middle of its container.

>
> 5) While we're at it, wouldn't it be nice to have a single, simple way
> to center anything horizontally in its containing box? margin: 0 auto
> usually works. I mean, if you wrap the contents in a table so that
> they auto-size. (That's a whole other issue, though, possibly solved
> by display: table?) Sometimes you have to use text-align: center,
> though. That's fun, but not really what we meant. Then sometimes
> there's no way at all, which isn't so fun.

Flex units also - just define horizontal margins having equal flex values.

>
> 6) If you felt really nice, letting me specify z-index on
> non-positioned elements and having it actually work would be really
> awesome. That's just if you feel like it, though. I know that there's
> a lot of other stuff to think about, here, and and I want you to take
> your own time to do it, and think about it for yourself.

You mean z-index on position: static elements?
Doable also if you would ask me.

> ~TJ
>

[1] http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

-- 
Andrew Fedoniouk

http://terrainformatica.com

Received on Wednesday, 17 March 2010 16:42:02 UTC