Tooltips & toggletips > Anchor positioning

Tic tac toe

Example code

							<div class="tic-tac-toe">
	<div id="try-1" class="them">o</div>
	<div id="try-2" class="us">⨉</div>
</div>

<style>
	#try-1 {
		anchor-name: --try-1;
	}
	#try-2 {
		position: absolute;
		position-anchor: --try-1;
		position-area: top left;
		/* try out: 
		top right
		top center
		center left
		center right
		bottom left
		bottom center
		bottom right
		*/
	}
	
	/* for demo purposes */
	#try-1 {
		position: absolute;
		top: calc(33.3333cqi + 6px);
		left: calc(33.3333cqi + 6px);
	}
  .tic-tac-toe {
		background-image: 
		  url("../tic-tac-toe-board.svg");
		background-size: cover;
		width: 30em;
		height: 30em;
		container-type: inline-size;
	}
  .tic-tac-toe > div {
		width: 33cqi;
		text-align: center;
		font-size: 20cqi;
		height: 33cqi;
		line-height: 33cqi;
	}
	.them { 
		color: black;
	}
	.us {
		color: red;
	}
</style>