абсолютное позиционирование не работает должным образом в IE, но оно работает нормально в Chrome и Firefox

Question

Вот моя страница и коды:

.col-md-6 {
   width: 50%;
   float: left;
   position: relative;
}
.headqt-corner-blk img{
   max-width: 100%;
   height: auto;
}
.h-corner-ctn {
  padding: 5px;
}
.h-corner-ctn-relative {
    position: relative;
}
.h-corner-text-absolute{
  position: absolute;
  left: -115px;
  top: 20px;
  background: #ccc;
  padding: 5px;
  margin-right: 5px;
}

<div class="headqt-corner-blk">
        <div class="row">
            <div class="col-md-6">
                <div class="h-corner-ctn">
                        <img src="https://www.sanshinj.co.jp/wp-content/uploads/2019/04/headqt-page-pro-1.jpg" alt="パートナーを募集しています">
                </div>
            </div>
            <div class="col-md-6">
                <div class="h-corner-ctn">
                        <img src="https://www.sanshinj.co.jp/wp-content/uploads/2019/03/headqt-page-pro-2.png" alt="パートナーを募集しています">
                    </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="h-corner-ctn">
                        <img src="https://www.sanshinj.co.jp/wp-content/uploads/2019/03/headqt-page-pro-3.png" alt="パートナーを募集しています">
                
                </div>
            </div>
            <div class="col-md-6">
                <div class="h-corner-ctn h-corner-ctn-relative">
                    <div class="h-corner-text-absolute">
                     <h4 class="corner-ttl"> 協力会社の募集
</h4>
                     <p>三進工業では、私たちと一緒にプラント工事に従事する協力会社を募集しています。詳しくはこちらからご確認ください。</p>
                    </div>
                </div>
            </div>
        </div>
</div>

Он работает в Chrome и Firefox, но когда я тестировал его в IE, он не работал, как я. Он перемещается влево -115px, но также выравнивает 115px вправо, я хочу, чтобы положение было зафиксировано с правой стороны. Посмотрите это подробно на этих фотографиях:
Ошибка происходит в браузере IE
Chrome и Firefox

Answer 1

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

Это означает, что ваш HTML действительно имеет родительский относительный элемент, ширина которого меньше ожидаемого результата.

Здесь вы хотите сместить ваш элемент на 115 пикселей влево, но вы также хотите увеличить размер вашего элемента на 115 пикселей. Вам нужно будет уточнить ширину с помощью этого дополнительного смещения. Вам также необходимо уточнить максимальную ширину, поскольку в настоящее время она установлена ​​на 100%.

Ниже приведен CSS, который будет работать во всех веб-браузерах

.absolute{
   left: -115px;
   top: 10px;
   position: absolute;
   width: calc(100% + 115px);
   max-width: calc(100% + 115px);
}