Display right issue on a php loop - php

Question

I created a notification area for my application. And I would like to display a small red bullet on the right of each tab.
I worked with a position absolute, the thing is now the bullets appear on all the page.
Here is my code and my CSS:
.read-button{
font-size: 8px;
color: #FC5D5D;
display:block;
position:absolute;
right:20px;
padding-top: 15px;
}
And my PHP:
<?php foreach($messages as $mess) { ?>
<?php
$from_user = $user->isClient()?User::findIdentity($mess->message_filmmaker_id):User::findIdentity($mess->message_client_id);
$from_name = $from_user->first_name." ".$from_user->last_name;
$url = "#";
if ($user->isClient()) $url = Url::to(['client/view-project', 'project_id' => $mess->project_id, 'filmmaker_id' => $from_user->id]);
elseif ($user->isFilmmaker()) $url = Url::to(['filmmaker/view-project', 'project_id' => $mess->project_id]);
?>
<a class="content" href="<?= $url ?>">
<div class="notification-item">
<div class="item-pic float-left"><div class="avatar"><?= Html::img(['/site/get-avatar', 'user_id' => $from_user->id]) ?></div></div>
<div class="item-info float-left">
<div><?= $from_name ?> - Il y a <?= $mess->getElapsedTime() ?></div>
<div><?= $mess->message_text ?></div>
</div>
<div class="read-button float-right">
<span class="glyphicon glyphicon-cd" aria-hidden="true"></span>
</div>
<div class="clear-both"></div>
</div>
</a>
<li class="divider"></li>
<?php } ?>

Answer 1

Absolute position works with a parent with absolute or relative position.
Try to set position:relative to notification-item class and absolute position works relative to this parent element.