如何將按鈕上添加的複選標記與它一起滾動？

我試圖在按鈕上添加一個複選標記來表示該頁面已訪問，但我不知道如何使用滾動按鈕？我成功地將符號放在上面的唯一方法是通過查看這裏的答案來添加複選標記符號，例如使用絕對位置添加通知符號。（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，所以不知道如何實現這一點，任何幫助，將不勝感激。

來源

2017-10-12 Meg

檢查此https://codepen.io/lajlev/pen/diKbz你可以使它大，因爲你的需要。 – Adrian

按鈕必須位置：相對於

來源

2017-10-12 16:22:14

歡迎來到本站！因爲你是新來的，我會給你一個提示。堆棧溢出的意義在於幫助其他人學習，而不僅僅是給他們提供一些代碼。畢竟，我們不是一個免費的代碼寫作服務。因此，不提供解釋就提供答案並不是一個好的答案。請閱讀[我如何寫出一個好答案]（https://stackoverflow.com/help/how-to-answer）瞭解更多關於Stack Overflow及其社區的理念和期望的信息。 – Tijmen

非常感謝您的幫助！ – Meg

position:absolute位置最接近的定位元件，它是內部內的元件。由於您沒有定位按鈕，所以選中標記現在位於文檔中。

如果您將position:relative添加到按鈕的css中，如下所示，複選標記將位於按鈕內部，無論按鈕移動哪個位置都會使其移動。

.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; 
    position:relative; 
}

來源

2017-10-12 16:36:05 Tijmen

如何將按鈕上添加的複選標記與它一起滾動？

回答

相關問題