I do be liking this API Here's some more ways of using the CSS Anchor Positioning API . First up, you can use the position of some collection of child elements specifically. For example, say you have a sidebar list with height: 100% that has an arbitrary amount of child list-items. You can now position an element so that it works as a faux-background to just the children, instead of the whole list. A similar effect could of course be achieved with a wrapper element, but those aren't allowed inside e.g. <ul /> elements, and some ugly overflowing top: -999vh; bottom: 0 hack has its own obvious drawbacks, and wouldn't even work for vertically centered children. 

<ol id='list'>
	<li>acre</li><li>bit</li><li>byte</li><li>celsius</li><li>centimeter</li><li>day</li><li>degree</li>
</ol>
<style>
	#list {
		position: relative;
		overflow-y: auto;
		display: flex;
		flex-flow: column;
		justify-content: center;
		height: 21rem;
		background: #0001;

		&::after {
			content: '';
			position: absolute;
			position-visibility: always;
			z-index: -1;
			inset: anchor(--first top, 0) 0 anchor(--last bottom, 0) 0;
			background: #0f01;
		}
	}

	li {
		margin: .5em .5em .5em 0;
		background: #fff1;

		&:first-child {anchor-name: --first}
		&:last-child {anchor-name: --last}
	}
</style>

One might assume that the green area would necessarily have to be a shrink-wrapped parent list element, but nay, it is merely a sibling inside a full-height list - and could even be in a completely separate part of the DOM tree!

Another thing I realized recently is that you can set the position anchor to an element that's inside a scroll-container, resulting in an anchor that follows the scroll position. Such things used to be impossible until methods like scroll-state queries and scroll-driven animations were invented. But now you can do it with even greater ease, using just a single anchor. 

<ol id='list'>
	<li>acre</li><li>bit</li><li>byte</li><li>celsius</li><li>centimeter</li><li>day</li><li>degree</li>
	<li>fahrenheit</li><li>fluid-ounce</li><li>foot</li><li>gallon</li><li>gigabit</li><li>gigabyte</li>
	<li>gram</li><li>hectare</li><li>hour</li><li>inch</li><li>kilobit</li><li>kilobyte</li>
	<li>kilogram</li><li>kilometer</li><li>liter</li><li>megabit</li><li>megabyte</li><li>meter</li>
	<li>microsecond</li><li>mile</li><li>mile-scandinavian</li><li>milliliter</li><li>millimeter</li>
	<li>millisecond</li><li>minute</li><li>month</li><li>nanosecond</li><li>ounce</li><li>percent</li>
	<li>petabyte</li><li>pound</li><li>second</li><li>stone</li><li>terabit</li><li>terabyte</li>
</ol>
<style>
	#list {
		overflow-y: auto;
		width: max-content;
		height: 35rem;
		margin-left: auto;
		background: #0002;

		&::after {
			content: 'Look, here\'s the 21st element of that list ☞ ';
			position: fixed;
			z-index: -1;
			inset: anchor(--pointed top) 0 auto 0;
			position-anchor: --pointed;
			position-visibility: always;
			display: flex;
			align-items: center;
			background: #fff2;
		}

		:nth-child(21) {anchor-name: --pointed}
	}
</style>