Значок CSS над изображением с помощью Bootstrap

Я пытаюсь разместить значок значка "уведомление" над изображениями. Я использую Twitters Bootstrap в качестве базовой структуры и создаю пользовательский класс CSS под названием notify-badge. Но я не могу заставить что-то правильно подойти.

Благодаря волшебству Photoshop, вот что я пытаюсь выполнить.

Вот мой CSS-код.

.notify-badge{
    position: absolute;
    background: rgba(0,0,255,1);
    height:2rem;
    top:1rem;
    right:1.5rem;
    width:2rem;
    text-align: center;
    line-height: 2rem;;
    font-size: 1rem;
    border-radius: 50%;
    color:white;
    border:1px solid blue;
}

Я хотел бы иметь возможность размещать любые небольшие тексты в значке и расширять красный круг до соответствия.

Вот мой HTML-код.

<div class="col-sm-4">
 <a href="#">
     <span class="notify-badge">NEW</span>
     <img src="myimage.png"  alt="" width="64" height="64">
 </a> 
    <p>Some text</p>
</div>

ИЗМЕНИТЬ:

Вот изображение с ответом APAD1.

Добавление margin-top:-20px; в .item устраняет проблему выравнивания.

Ответ 1

Букет различных способов, которыми вы можете это сделать. Это должно начать:

.item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:-20px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
  	<div class="item">
  		<a href="#">
			<span class="notify-badge">NEW</span>
      		<img src="http://placehold.it/200x200"  alt="" />
		</a>
	</div>
</div>

Ответ 2

Вот скрипка, которую я сделал с образцом кода:

https://jsfiddle.net/un2p8gow/

Я изменил span notify-badge на div. Я не видел причин, по которым это должен был быть промежуток.
Я изменил позицию на относительную. Изменить - вы могли бы сохранить атрибут position: absolute;, если знаете, что с ним делаете. Парень в комментариях был прав.
У вас был атрибут right: 1.5rem;, и я просто изменил его на left, потому что он был вставлен в противоположную сторону вашего примера.

Вы можете настроить его дальше, но в вакууме это то, что вы хотите.

Ответ 3

Идея здесь заключается в том, чтобы наложить абсолютный контейнер поверх относительного. Здесь аналогичный пример:

<div class="image">
      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>

CSS:

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

Это позволит сделать наш текст правильно поверх изображения красиво, но он не выполняет поле, которое мы хотим достичь за текстом. Для этого мы не можем использовать h2, потому что это элемент уровня блока, и нам нужен встроенный элемент без определенной ширины. Итак, оберните h2 внутри пролета.

<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

Затем используйте этот диапазон для стиля и текста:

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

Для идей о том, как обеспечить правильный интервал или использовать jQuery для очистки кода немного, разрешив вам удалить некоторые теги из кода и jQuery обратно, проверьте источник.