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像素。您将需要通过此附加偏移量来优化宽度。您还需要优化最大宽度（当前设置为100％）。

下面是可在所有网络浏览器上使用的CSS

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

绝对定位在IE中无法正常工作，但在Chrome和Firefox中可以正常运行

1 个答案: