通知背景位置问题

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

放在一起：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

P.S
根据需要更改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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;