我想在按钮上添加一个复选标记符号来指示访问过的页面，但我不知道如何让它随着按钮滚动？我成功放置符号的唯一方法是查看此处的答案以添加复选标记符号，例如使用绝对位置添加通知符号。 ( Easiest css for Facebook style "red" notifications )
但是绝对位置使得复选标记不可滚动，那么我怎样才能将符号添加到它并使其可以使用按钮滚动？我想达到的效果附在这里。
body{
margin:0;
height:100%;
width:100%;
overflow:hidden;
}
iframe{
height: calc(100% - 90px);
width: 1px;
min-width: 100%;
position: relative;
z-index: 0;
overflow: hidden;
}
.ribbon{
height:125px;
width:100%;
position: fixed;
bottom: 0;
background:#F4F4F4;
z-index:1000;
font-family: 'Helvetica',sans-serif;
}
.ribbon-buttons{
overflow: auto;
width:100%;
height:100px;
padding-top: 8px;
white-space: nowrap;
}
.ribbon-button {
overflow: auto;
height:65px;
line-height:44px;
display:inline-block;
background-color:#D6D6D6;
width:65px;
border-radius:50px;
margin-right:26px;
margin-left:9px;
opacity: 0.6;
}
.logo{
width:55px;
height:55px;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
margin:5px;
}
.active {
background-color:#50E3C2;
opacity: 1;
}
.checkmark{
width:15px;
height:15px;
background-image: url('checkmark.png');
position:absolute;
left: 65;
top: 50;
display:inline-block;
}
<body>
<div class="ribbon">
<div class="ribbon-buttons">
<div class="ribbon-button active">
<div class="logo" ></div><div class="checkmark"></div>
</div>
提前致谢!我真的是 html/css 的新手，所以不太确定如何实现这一点，我们将不胜感激。
最佳答案
按钮必须有position:relative
关于jquery - 如何使按钮上添加的复选标记符号与其一起滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46714142/