Проблема позиционирования дочернего элемента в css в Firefox и inte rnet explorer

Question

Я пытаюсь правильно расположить поле переключателя в поле пароля, используя CSS. Проблема в том, что позиционирование хорошо работает в Google chrome, но оно не работает в firefox и ie. Я пытался найти решение, но, будучи новичком в веб-разработке, я не получил решения. Пожалуйста, помогите мне выяснить решение.

Мой HTML часть

        <div id="password">
            <label for="pwd">Password</label>
            <div>
                <input type="password" id="pwd" name="pass_word" autocomplete="off" maxlength="12" value="<?php echo $pwd; ?>">
                <span class="icon"><i id="show-pwd" class="far fa-eye hide"></i></span>
                <span class="icon"><i id="hide-pwd" class="far fa-eye-slash"></i></span>
            </div>
            <div id="perr" class="err"><?php echo $pwderr; ?></div>
        </div>

        <div id="confirm-password">
            <label for="cnfpwd">Confirm Password</label>
            <div>
                <input type="password" id="cnfpwd" name="cnf_pwd" autocomplete="off" maxlength="12" value="<?php echo $cpwd; ?>">
                <span class="icon"><i id="show-cnfpwd" class="far fa-eye hide"></i></span>
                <span class="icon"><i id="hide-cnfpwd" class="far fa-eye-slash"></i></span>
            </div>
            <div id="cperr" class="err"><?php echo $cpwderr; ?></div>
        </div>

Мой CSS часть

.confirm-password{
    position: relative;
}

.icon{
    position: absolute;
    transform: translate3d(-140%,40%,0);
    color: #555;
}

Первое изображение показывает, как оно выглядит в chrome, а второе показывает, как оно выглядит в firefox.

Answer 1

Ваш div имеет идентификатор confirm-password, но ваше правило CSS предназначено для класса: .confirm-password. Измените . на #, и вашему div теперь будет присвоен position: relative.