CSS has a lot of features, yet unfortunately lacks a few basic positioning abilities. Many layouts are difficult to achieve, and often ignored, being supplanted by more rigid layouts instead. Here I present an addition that would greatly improve the flexibility of CSS. It builds on the existing positioning model thus should be easy to understand, and relatively straight-forward to implement.
position-anchor
One of the key limitations of the absolute positioning model is the inability to specify the alignment coordinates of the contained box. The left
, top
, right
, and bottom
properties only provide ways to position variably sized elements relative to the sides of the containing box. A single position-anchor
property would significantly improve the flexibility.
position-anchor
specifies what position in the contained element is aligned. It is combined with any two of the left
, top
, right
, and bottom
properties to define the alignment position in the containing box. For example, the below would place the center of one inner box in the exact center of the top-left quadrant of the parent element, and another with a slight overhang near the bottom right.
1 2 3 4 |
<div class='outer'> <div class='top-left'></div> <div class='bottom-right'></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.outer { position: relative; } .top-left { position: absolute; left: 25%; top: 25%; position-anchor: 50% 50%; } .bottom-right { position: absolute; right: 2em; bottom: 2em; position-anchor: 90% 90%; } |
First define position-anchor
in CSS parlance as a shorthand property for position-anchor-vertical
and position-anchor-horizontal
. Each property has the value <length> | <percentage> | auto
. The position-anchor-vertical
indicates which vertical offset of the child is aligned to the parent’s alignment position. In this example the vertical center of the top-left child 50%
is aligned to the 25%
height of the parent. Similarly the position-anchor-horizontal
indicates the horizontal alignment position.
Default Value
The default value is auto
and the existing alignment model maps relatively easily.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.top-left { top: 30%; left: 0%; /* specifiying top/left implies a top-left anchor in the child*/ position-anchor: 0% 0%; } .bottom-right { bottom: 5px; right: 0; /* This implies a bottom-right anchor in the child */ position-anchor: 100% 100%; } .top-right { top: 10%; right: 2em; /* Implied values are independent */ position-anchor: 0% 100%; |
Looking at these defaults it makes the limitation of the current model more apparent. It also implies that the agents must already be doing the basic calculations necessary to support the position-anchor
extension.
Note that only one of each top, bottom
and left, right
can be used at once (value other than auto
), otherwise the default anchor would be ambiguous. For standards sake we might wish to specify that simply left
and top
are preferred.
Feedback
This is a simple idea that would both significantly improve layout options and reduce the need to use current layout tricks. At the very least it makes proper centering possible. I don’t believe it would be difficult to implement, and it plays well with the current standard. It may however need some fine-tuning. What do you think?