[css-round-display] Positioning elements with polar positioning and absolute positioning

On Jan 07, 2016, at 1:10 PM, Florian Rivoal <florian@rivoal.net> wrote:
 > >> Is it possible to use like below?:
 > >>
 > >> position: absolute;
 > >> center: 50% 50%;
 > >> polar-anchor: 25% 25%;
 > >
 > > You wouldn't need polar-anchor for that. You would just do this:
 > >
 > > position: absolute;
 > > center: 75% 75%; /* 50% + 25% = 75% */

The examples above have different results.
If the containing block has height: 50px, width: 50px and the element within
that containing block is

  position: absolute;
  width: 20px;
  height: 20px;
  center: 50% 50%;
  polar-anchor: 25% 25%;

then the center point of the element is positioned to the (30px, 30px) of
the containing block.
	( x position of the element's center point 
            = width of the containing block * 50% + width of the element *
25% 
            = 30px )

but when the element is specified like below,:

  position: absolute;
  width: 20px;
  height: 20px;
  center: 75% 75%;

in that case, the center point of the element is positioned to the (width of
the containing block * 75%, height of the containing block * 75%) of the
containing block.

 > > I am suggesting we don't need polar-anchor at all. For cases where you
want to offset it from center by a non-percentage length, margin-top and
margin-left work fine for this, as they have for many, many years with
absolute positions set in percentage.

Do you think that after positioning element with 'center', using margin can
do the same result of using 'polar-anchor'?

I don't think so. 
When using 'center' property, the anchor point of element is always the
center of the content area.
So the margin should be applied according to the center point, not the upper
left corner of the content as the general box model.
Therefore modifying margin value of the element positioned by 'center'
doesn't change the position of the element within the containing block.

 > If "center: center center: polar-anchor: top left;" and "center: 50% 50%;
polar-anchor: 25% 25%;" is supposed to do the same, then the "center" name
is confusing, since what it is aligning is not necessarily the center. If it
doesn't do the same, then it is less expressive.

I also agree with that.

 > I think this last sentence is the key here. Using center instead of
polar-origin creates 2 tradeoffs with downsides not encountered with
polar-origin:
 > - we either have the maybe-too-magical auto behavior I describe above, or
make polar coordinates more verbose to use in simple cases 
 > - we either drop polar-anchor, or find a different name than center, or
live with a confusing name

Do we need to drop 'polar-anchor'? 
'polar-anchor' would improve the flexibility of CSS positioning and avoid
the overflowing problem.
So I prefer to find a different name than center.
Previously, I suggested 'box-origin' or 'origin-point'.



Thanks,
Jihye

Received on Thursday, 7 January 2016 23:31:18 UTC