バッチを重ねて表示したい
「新着」や「新規」といった意味の通知をしたいとき、ボックスの右上に「New」と書かれたバッチ（マーク）を、ポジション配置で表示させます。left/top/right/bottom各プロパティには、マイナスの数値を指定することができます。この特性を利用して、バッジをボックスの上部からはみ出す位置に配置します。
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8">
<style>
.keyvisual{
position: relative;
width:800px;
}
.title{
margin:0;
font-size:14px;
}
.title a{
text-decoration:none;
color: #000000;
}
.title a:hover{
color:#717171;
}
.badge{
position: absolute;
right: 20px;
top:-8px;
padding-top: 20px;
width: 60px;
height: 40px;
border-radius: 50%;
background:#ff4f00;
text-align: center;
font-size:12px;
font-weight: bold;
color:#ffffff;
box-shadow:0px 6px 6px 0px rgba(0,0,0,0.5);
}
.thumbnail{
margin-bottom:10px;
font-size:0;
}
.thumbnail img{
width: 100%;
}
</style>
</head>
<body>
<div class="keyvisual">
<div class="badge">NEW</div>
<div class="thumbnail">
<img src="./images/keyvisual.jpg" alt=""/>
</div>
<div class="title">
<p><a href="#">中学生になったら部活動はどこにしようかな？</a></p>
</div>
</div>
</body>
</html>実行結果
