Improving CSS Positioning with position-anchor

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?