Question

我有一个菜单通知，我希望它绝对定位。

问题例如，如果通知编号为+4，则通知会正确显示.. 但是当+45或+456时，它会移动到中心并隐藏de icon。

如何保持通知提醒...始终位于奖杯图标的右侧？

.menu{
position:relative;
display:block;
width:32px;
height:35px;
background:red;
text-align:center;
margin:100px;
}

.menu img{
width:16px;
height:16px;
padding-top:10px;
}

.trophy_notification{
	position:absolute;
	top:1px;
	right:-1px;
	background: #45A163;
  font-size:11px;
	padding:2px 3px;
	color:#fff;
	font-weight:bold;
	-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
	text-align:center;
	 
    -webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 0px rgba(0,0,0,0.3);
	z-index:9999;
	
}

<div class="menu"><img src='https://image.flaticon.com/icons/svg/251/251072.svg'/><span class="trophy_notification">+4</span></div>


<div class="menu"><img src='https://image.flaticon.com/icons/svg/251/251072.svg'/><span class="trophy_notification">+45</span></div>



<div class="menu"><img src='https://image.flaticon.com/icons/svg/251/251072.svg'/><span class="trophy_notification">+453</span></div>

Answer 1

您可能希望将left: calc( 100% - 10px );更改为{{1}}对于权利，它会将数字设置为距离右侧最多1px。通过使用left，它将设置它应该从右边开始10px，无论数字有多长。

无论内容css如何，都要保持通知位置

1 个答案: