html - 在非绝对位置上显示带有徽章的图标(计数新消息)

Question

我在我的 HTML 应用程序上使用 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 或添加此类来操作侧边栏 li 宽度:

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