在非绝对位置上显示带有徽章的图标（计数新消息）

Question

我在 HTML-app 上使用 UIkit (https://getuikit.com)。

现在我想要一个图标来显示带有许多新消息的徽章。

这个图标在我的笔记本电脑上工作正常，但它没有显示在正确的位置，如果我使用关闭 canvas。

我创建了一个代码笔来演示这一点：

https://codepen.io/spqrinc/pen/RvaZMJ

这是我的 css 徽章：

.tpl-badge-icon {
  position: absolute;
  top: -50%;
  right: 0%;
}

单击 "Click me for Off-Canvas" 关闭 canvas 元素。

Answer 1

这是因为你的 .bar-bottom 与侧边栏的宽度不同（如果你检查宽度是 270px）并且影响 li 宽度，因为它使用百分比。您可以通过将 .box-bottom 宽度从 240px 更改为 270px 或 添加此 class 以操纵侧边栏 li 宽度：

.uk-subnav.uk-flex.uk-flex-center.uk-child-width-1-5.uk-grid li 
{
  width: 52px;
}