やりたいこと

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;
}

サンプルソース

Githubを参照