All examples

Tooltips & toggletips > Anchor positioning
Position try fallbacks

Sometimes, you've anchored something to the top that you'd want to be at the bottom if there isn't enough space at the top (say, because you've scrolled).

Anchor positioning supports position-try-fallbacks, so you can say: it's also fine for me if it positions in this location.

Example code

							<div class="scroll-container">
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<button 
		type="button" 
		aria-labelledby="bold">
		B
	</button>
	<div 
		id="bold">
		Bold
	</div>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
</div>

<style>
	button {
		anchor-name: --button;
		margin: 2em;
	}
	#bold {
	  position: absolute;
		position-anchor: --button;
		position-area: top;
		position-try-fallbacks: bottom;
	}
	
	/* for demo purposes */
	.scroll-container {
	  margin: 2em;
		width: 20em;
		height: 10em;
		background-color: #f2dd2c;
		overflow: auto;
	}
	#bold {
	  background-color: rgba(0,0,0,0.7);
		color: white;
		padding: 1em;
	}
</style>

Preview

Browser support