3 ms·
Chrome just added CSS Anchor Positioning this year. The other browsers also expressed interest in implementing it, with Firefox having announced an Intent to Im
by pax_americana 2y ago
Chrome just added CSS Anchor Positioning this year. The other browsers also expressed interest in implementing it, with Firefox having announced an Intent to Implement. The feature would likely be available on all major browsers sometime next year.
So here's how your example would work using it:
.outer {
width: 100%;
height: 400px;
background: aliceblue;
anchor-name: --outer;
}
.left {
width: 100px;
height: 100px;
background: white;
position: absolute;
position-anchor: --outer;
left: anchor(left);
align-self: anchor-center;
}
.center {
width: 150px;
height: 200px;
background: pink;
position: absolute;
position-anchor: --outer;
justify-self: anchor-center;
align-self: anchor-center;
}
.right {
width: 160px;
height: 150px;
background: gray;
position: absolute;
position-anchor: --outer;
right: anchor(right);
align-self: anchor-center;
}
Source: https://developer.chrome.com/blog/anchor-positioning-api https://developer.chrome.com/blog/anchor-positioning-api
- meindnoch 2y agoCool! Is it going to be the sixth or the seventh positioning system in CSS?