Блог

Главная - Вопросы по программированию - CSS: индикатор выполнения, второй фон отображается под панелью вместо перекрытия

CSS: индикатор выполнения, второй фон отображается под панелью вместо перекрытия

#html #css #progress-bar #ejs

#HTML #css #индикатор выполнения #ejs

Вопрос:

Я пытаюсь создать индикатор выполнения. Если пользователь выполнил 20%, создается панель с моим заданным цветом правильной ширины. Но по какой-то причине он появляется под моим индикатором выполнения вместо перекрытия, и я понятия не имею, почему.

Бонусный вопрос: Есть идеи, почему текст не выровнен по центру?

Изображение

CSS:

 .progress-bar {
    height: 20px;
    width: 126px;
    background: #BABABA;
    position: relative;
}

.progress-bar span {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    position: relative;
}

.progress-bar div.bar {
    height: 20px;
    background: #336291;
    position: absolute;
}

EJS:

 <td>
                        <div class="progress-bar">
                            <span><%= gamedata[i].progressPercentage %></span>
                            <div class="bar" style="width:<%= gamedata[i].progressPercentage %>;"></div>
                        </div>
                    </td>

Ответ №1:

Вы должны указать правильные координаты, поэтому добавьте следующие строки:

 .progress-bar div.bar {
    /* your code here */

    top: 0;
    left: 0;
}

Бонусный ответ: ваш текст выровнен по центру, а ваш элемент DOM — нет. Что я предлагаю сделать, так это автоматически создавать боковое поле и обрабатывать его как блок, вот так:

 .progress-bar span {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 15px;
    display: block;
    margin: auto;
    position: relative;
}

Комментарии:

1. Не увидел бонусного ответа, попробую позже. Мне также нужно будет сделать его читаемым и сейчас, цвет из второй панели скрывает текст.

Ответ №2:

попробуйте этот код, ничего особенного не изменится. Некоторые небольшие изменения в css и HTML.

 .progress-bar {
        height: 20px;
        width: 126px;
        background: #BABABA;
        position: relative;
    }
    
    .progress-bar span {
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 15px;
        text-align: center;
        position: relative;
    }
    
    .progress-bar div.bar {
        height: 20px;
        background: #336291;
        position: absolute;
    }

Слышен html код:

 <td>
   <div class="progress-bar">
      <div class="bar" style="width:<%= gamedata[i].progressPercentage %>;">
          <center><%= gamedata[i].progressPercentage %></center>
      </div>
  </div>
</td>