绝对定位在 IE 中不工作，但在 Chrome 和 Firefox 中工作正常

Question

这是my page和代码：

.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，我希望位置固定在右侧。在这些图片中详细查看：
Error happens in IE browser
Chrome and Firefox

Answer 1

请记住，一旦您在绝对元素上以百分比形式指定宽度，它将引用第一个相对父元素，或者，如果未定义，则引用页面的宽度。

这个蜜蜂说，你的 HTML 确实有一个父相关元素，其宽度小于预期结果。

在这里，您想将元素向左移动 115 像素，但您还想将元素的大小也放大 115 像素。您将需要通过这个额外的偏移来细化宽度。您还需要优化 max-width，因为当前设置为 100%。

以下是适用于所有网络浏览器的CSS

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

绝对定位在 IE 中不工作，但在 Chrome 和 Firefox 中工作正常

absolute positioning not working proper in IE, but it works ok in Chrome and Firefox

css

internet-explorer

css-position