|
|
|
|
|
|
by pax_americana
662 days 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 |
|
|