gpt4 book ai didi

jquery - 如何使按钮上添加的复选标记符号与其一起滚动?

转载 作者:行者123 更新时间:2023-11-28 02:49:58 25 4
gpt4 key购买 nike

我想在按钮上添加一个复选标记符号来指示访问过的页面,但我不知道如何让它随着按钮滚动?我成功放置符号的唯一方法是查看此处的答案以添加复选标记符号,例如使用绝对位置添加通知符号。 ( Easiest css for Facebook style "red" notifications )

但是绝对位置使得复选标记不可滚动,那么我怎样才能将符号添加到它并使其可以使用按钮滚动?我想达到的效果附在这里。

enter image description here

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com