画像の上に番号ラベルを追加

Question

私はthis fiddle

span.label{ 

     width:100px; color:#FFFFFF; 
     background-color:#F43B05; 
     float:right; padding:3px; 
     position:absolute; top:50px; left:5px; 
} 

を使用してspan.labelにこのCSSを追加しましたそして、私はこれ持って

EDIT：

を

ブートストラップを使ってイメージにラベルを付ける必要があります。

私はラベルの付いたこのイメージを持っている：

<span class="label label-success">4</span> 

<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button"/> 

<div title="3rd Molar - Upper Rigth Jaw" id="div_one" class="collapse"><?php echo $resTeeth['one'] ?> 

</div> 

しかし、これは私が欲しいものではありません。

そして、ここではそのためのコードです。私が欲しいのは、画像の上にこの番号4の緑色のラベルを付け加え、その横には付けないことです。

私はこの試みた：

<span class="label label-danger">4 
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button"/> 
<div title="3rd Molar - Upper Rigth Jaw" id="div_one" class="collapse"><?php echo $resTeeth['one'] ?> 
</div> 
</span> 

をそして、私はこの持っている：ちょうどspan.labelためfloat:leftを使用して、label要素の位置を設定するためにマージンを設定し

Answer 1

これはあなたの答えになると確信しています。 おかげ

/* CSS used here will be applied after bootstrap.css */ 
 
.badge-notify{ 
 
    background-color:red !important; 
 
    position:relative; 
 
    top: -20px; 
 
    left: -35px; 
 
    }

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <button class="btn btn-default btn-lg btn-link" style="font-size:36px;"> 
 
    <span class="glyphicon glyphicon-comment"></span> 
 
    </button> 
 
    <span class="badge badge-notify">3</span> 
 
</div>

Answer 2

を。

Answer 3

はこれを試してみてください。

<div class="container"> 
    <img src="" /> 
    <span class="lbl">something</span> 
</div> 

.container{ 
position:relative; 
} 
.container img, .container .lbl{ 
position:absolute; 
top:0px; 
left:0px; 
} 

Answer 4

私はコメントで提案したもののように、ここでは2つの例を作りました。

JSFiddle

div 
{ 
    position: relative; 
    width: 300px; 
    height: 300px; 
} 

span 
{ 
    position: absolute; 
background: red; 
    color: white; 
    height: 60px; 
    width: 60px; 
    text-align: center; 
    font-family: Tahoma, sans-serif; 
    font-size: 40px; 
    line-height: 55px; 
    border-radius: 10px; 
    bottom: 0; 
    right: 0; 
} 

.icon 
{ 
    position: relative; 
} 

.icon:after 
{ 
    content:"4"; 
    position: absolute; 
    display: block; 
    background: red; 
    color: white; 
    height: 60px; 
    width: 60px; 
    text-align: center; 
    font-family: Tahoma, sans-serif; 
    font-size: 40px; 
    line-height: 55px; 
    border-radius: 10px; 
    bottom: 0; 
    right: 0; 
}