php - 在 php 循环中显示正确的问题

Question

我为我的应用程序创建了一个通知区域。我想在每个选项卡的右侧显示一个红色的小圆点。

我使用的是绝对位置，现在所有页面上都出现了元素符号。

这是我的代码和我的 CSS:

.read-button{
    font-size: 8px;
    color: #FC5D5D;
    display:block;
    position:absolute;
    right:20px;
    padding-top: 15px;
}

还有我的 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

绝对位置适用于具有绝对或相对位置的父级。尝试设置 position:relative to notification-item class 和 absolute position works relative to this parent element.