htmlの要素でカウントを上書きする方法

Question

私のHTMLウェブサイトでは、画面の左下に固定の位置にある円を作成しました。ページにはチェックボックスがあります。私が望むのは、ユーザがチェックボックスをクリックすると、チェックボックスの数が円の上に上付き文字として表示されなければならないということです。 （通知回数がFacebookに表示される方法）。

円を描くためにspanとcssを使用しましたが、<sup>を試しましたが、場所のカウント値はスパンのフォントが変わると変化します。

従うのがベストプラクティスですか？

Answer 1

2つの独立したdivを維持します。 1つは基点（円）用で、もう1つは上付き文字用で、両方の位置と大きさを指定することで位置を固定します。ここでは、スニペットです：

<div style="width:100px;height:100px;background-color:red;border-radius:50px;display:inline-block;text-align:center;position:relative;top:0px;right:0px;"> 
 
    <div style="background-color:yellow;position:absolute;right:0px;top:0px;display:inline-block;"> 
 
    2 
 
    </div> 
 
    <!-- Content goes here--> 
 
    App 
 
</div>

それはあなたの円の内側の内容に影響されない位置だように、内側のDIVは、絶対位置を持っていることを確認します。 乾杯！ :)