やりたいこと
HTML要素を重ね合わせて、バッチ表示を行う
↓はイメージ
サンプルコード
CSS
.menuList {
width : 40%;
padding : 5px 0;
/* aタグの下線/文字色 変更 */
text-decoration : none;
color : #000000;
/* 子要素（縦軸：中央揃い、横軸：左寄せ */
display : flex;
align-items : center;
justify-content : flex-start;
}
/* アイコン/バッチ */
.menuList .menuIcon {
position : relative;
padding : 5px;
}
/* アイコン画像 */
.menuList .menuIcon .menuImg {
width : 70%;
height : auto;
margin-right : 20px;
position : relative;
}
/* バッチ */
.menuList .menuIcon .newBadge{
display : block;
width : 15px;
height : 15px;
margin : 0 18px 15px 0 !important;
border-radius : 50%;
background : red;
z-index : 10;
/* バッチ内テキスト */
font-size : 7px;
text-align : center;
color : #000000;
/* 表示位置 */
top : 5;
right : 10;
position : absolute;
}
HTML
<a href="#" class="menuList">
<div class="menuIcon">
<img class="menuImg" src="./img/icon1.png">
<div class="newBadge">1</div>
</div>
<span class="menuText">サイドメニュー</span>
</a>
解説
-
menuListクラス
サイドメニューで使う領域を確保
子要素の均等配置の設定（flex）
ポイント：この設定で、サイドメニューの表示領域を設定/確定させる -
menuIcon／menuTextクラス
アイコン画像と文字を表示する領域を確保する
menuIconクラスはRelativeにする
-
menuImg／newBadgeクラス
menuImg：親要素に対して、画像の表示サイズを設定する（親要素の70%の縮尺など）
newBadge：menuImgに重ねてバッチを表示。位置は親要素内の領域で設定（newBadgeクラスは、absoluteにする）
ポイント：newBadgeクラスは、親要素内で座標を設定している(css抜粋)
/* バッチ */
.menuList .menuIcon .newBadge{
/* ～ （中略）～ */
/* 表示位置 */
top : 5; /* 親要素からみたＹ軸の座標設定 */
right : 10; /* 親要素からみたＸ軸 の座標設定 */
position : absolute;
}