通知后台位置问题

Question

有一个 CTA 按钮，上面有这个小通知气泡：

我已设法将 2 号定位到正确的位置，但背景自身定位不正确：

这是我的 HTML：

<button type="button" class="btn btn-link center-block green" role="link" type="submit" name="op" value="Link 2">see our vacancies<sup class="notify">2</sup></button>

这是 CSS：

.btn-link.green {
  margin-top: 65px;
  text-decoration: none;
  border: none;
  background-color: #1dcb8b;
  color: white;
  padding: 15px 30px;
  position: relative;
}

.notify {
  position: absolute;
  top: -7px;
  right: -7px;
  background: #1dcb8b;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #052c57;
  font-size: 1.3rem;
}

这是link to the demo page。

我做错了什么？感谢您的帮助。

Answer 1

修改.notify如下，使用<span>而不是<sup>

.notify {
position: absolute;
top: -20px;
padding:8px;
background: #1dcb8b;
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid #052c57;
font-size: 1.3rem;
}

放在一起：

* {
  box-sizing: border-box;
}
.btn-link.green {
  margin-top: 65px;
  text-decoration: none;
  border: none;
  background-color: #1dcb8b;
  color: white;
  padding: 15px 30px;
  position: relative;
}
.notify {
  position: absolute;
  top: -20px;
  background: #1dcb8b;
  padding: 10px 0px 10px 0px;
  text-align:center;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #052c57;
  font-size: 1.3rem;
}

<button type="button" class="btn btn-link center-block green" role="link" type="submit" name="op" value="Link 2">see our vacancies<span class="notify">2</span>
</button>

附言
根据需要更改top 和padding。
我在你的网站上试过，它有效..

Answer 2

sup 标签默认向上移动文本，所以我建议使用 span 标签。

然后像这样更改您的 CSS：

.notify {
    position: absolute;
    top: -25px;
    right: -25px;
    background: #1dcb8b;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border-radius: 100%;
    border: 2px solid #052c57;
    font-size: 1.3rem;
}

Answer 3

.btn-link.green {
  margin-top: 65px;
  text-decoration: none;
  border: none;
  background-color: #1dcb8b;
  color: white;
  padding: 15px 30px;
  position: relative;
}

.notify {
  position: absolute;
  top: -30px;
  right: -25px;
  background: #1dcb8b;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #052c57;
  font-size: 1.3rem;
  line-height:3rem;
}

<button type="button" class="btn btn-link center-block green" role="link" type="submit" name="op" value="Link 2">see our vacancies
  <sup class="notify">2</sup>
</button>

没有 DOM 变化，只需调整 top and right 的位置并添加 line-height。完成。

https://jsfiddle.net/341064cd/3/JSFiddle 预览

Answer 4

灵活的版本允许您更改宽度和高度，一切都将保持不变。

.btn-link.green {
  margin-top: 65px;
  text-decoration: none;
  border: none;
  background-color: #1dcb8b;
  color: white;
  padding: 15px 30px;
  position: relative;
}

.notify {
  background: #1dcb8b;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #052c57;
  font-size: 1.3rem;
  display: inline-flex;
  position: absolute;
  top: -50%;
}

/* center text horizontally and vertically */
.notify > span {
  margin: auto;
}

<button type="button" class="btn btn-link center-block green"
role="link" type="submit" name="op" value="Link 2">
  see our vacancies<sup class="notify"><span>2</span></sup>
</button>