[CSS] 画像を重ねて表示

	<style>
		.good {
			width: 50px;
			height: 50px;
			color: #ffffff;
			background-color: #2779bd;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			border-radius: 50%;
			cursor: pointer;
		}
	</style>
	<h1>画像を重ねて表示</h1>
	<img src="img/bridge1.jpg">
	<div class="good">
    <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
	</div>

		.sample-box {
			position: relative;
			width: 300px;
		}
		.good {
			width: 50px;
			height: 50px;
			color: #ffffff;
			background-color: #2779bd;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.5rem;
			border-radius: 50%;
			cursor: pointer;

			position: absolute;
			top: 85%;
			left: 140%;
		}

position absoluteで、top, leftは%で表示する。

なるほど、これをTシャツでやりたい。

なるほど