Programming

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%;
}

css_position_simple

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?

Categories: Programming

Tagged as: , , ,

2 replies »

  1. Seems pretty good to me, at least for `position: absolute` and `fixed`. `relative` should be fine, too. Might be worth thinking about how it could (or if it should at all) interact with the newer `sticky`.

    • I think it can function the same way with sticky. A stick element still has an achor point, defined the same way as for absolute now. That is, since it works fine for both relative and absolute it shouldn’t be a problem.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s