职位：绝对；左属性无法正常工作

Question

在以下代码笔中 - https://codepen.io/tanmaylodha/pen/MWKXJWW CSS：第 26 行； left:50% 工作不正常。 但是如果我在绝对定位元素.badge 的包含块.section-first a 上设置display:inline-block，那么它工作正常。

    <section class="section section-first">
   <a href="#">
     <h1 class="badge">Recommended</h1>
     <h1 class="plus-plan">Our PLUS Plan</h1>
     <h2>The most popular choice of our customers.</h2>
     <p>
       Benefit from increased storage and faster support to ensure that
       your mission-critical data and applications are always available!
     </p>
   </a>
 </section>

.section {
  color: #6c6164;
  background-color: #f7fafd;
  padding: 1.563rem;
  margin-bottom: 1.563rem;
  border: 5px solid #fca156;
  margin-right: 12.5rem;
  box-shadow: inset 5px 5px 10px 2px #4fbf99;
}

.section-first {
  margin-top: 8rem;
}

.section-first a {
  position: relative;
}

.badge {
  font-family: "Red Hat Display";
  background-color: #60a7bd;
  padding: 0.625rem;
  border-radius: 5px;
  margin: 0%;
  position: absolute;
  left: 50%;
}

.section h1.badge {
  color: white;
}

.section-first .plus-plan {
  margin-top: 50px;
}

.section-highlighted {
  margin-left: 200px;
  margin-right: 0px;
  box-shadow: inset 5px 5px 10px 2px #4fbf99, 5px 5px 10px 2px #60a7bd;
  text-align: right;
}

.section:hover {
  border-color: #ff943c;
}

.section a {
  text-decoration: none;
}

现在检查这个代码笔 - https://codepen.io/tanmaylodha/pen/jOWKyZP 但这里的结果是不同的。 .child 被绝对定位的元素在其包含块 .parent 的 50% 宽度之后得到正确定位@

 <a href="" class="parent">
  I am a Parent
  <div class="child">
    I am a child
  </div>
</a>

.parent {
  position: relative;
  background-color: chocolate;
}
.child {
  position: absolute;
  background-color: darkgreen;
  left: 50%;
}

在上述两个Codepen中，包含块（相对定位）总是一个内联元素，那为什么结果不同呢？

Answer 1

为了让问题更清楚，这里是说明差异的最少代码：

.parent {
  position: relative;
  background-color: chocolate;
}

.child {
  position: absolute;
  background-color: darkgreen;
  left: 50%;
}

<a href="" class="parent">
      I am a Parent
      <div class="child">
        I am a child
      </div>
    </a>
<br><br><br><br><br>
<a href="" class="parent">
  <div>I am a Parent</div>
  <div class="child">
    I am a child
  </div>
</a>

请注意，在第一种情况下，您的内联元素中包含文本内容，因此您的元素的宽度用作左侧属性的参考。在第二种情况下，您在内联元素中有一个块元素，现在这个元素的宽度等于0（没有背景颜色），这就是您在第一个代码中所面临的。 left:X% 的 0 是 0 所以什么都不会发生。

您所做的当然是有效的，但是在 inline 元素中包含块元素会使渲染有点棘手。从the specification你可以阅读：

当内联框包含流内块级框时，内联框（及其在同一行框内的内联祖先）在块级框周围被破坏（以及任何块级兄弟姐妹是连续的或仅由可折叠的空格和/或外流元素分隔），s将内联框分成两个框（即使任一侧为空），每个一个块级框的一侧。断点前和断点后的行盒被封闭在匿名块盒中，块级盒成为这些匿名盒的兄弟。当这样的内联框受到相对定位的影响时，任何由此产生的平移也会影响内联框中包含的块级框。

是的，不容易理解，但让我们以我们的示例为例，添加更多 CSS 以更好地查看：

.parent {
  position: relative;
  background-color: chocolate;
  border:2px solid red;
}

some text before<br>
<a href="" class="parent">
  <div>I am a Parent</div>
</a>
<br> some text after

您可以看到块元素如何将我们的内联元素分解为两个空的块。

为避免处理此问题，请避免在行内元素中包含块元素。使用inline-block 解决此问题：

.parent {
  position: relative;
  background-color: chocolate;
  border:2px solid red;
  display:inline-block;
}

some text before<br>
<a href="" class="parent">
  <div>I am a Parent</div>
</a>
<br>
some text after

Answer 2

请使用这个...

.section-first {
  position: relative;
}

而不是下面的样式。

.section-first a {
  position: relative;
}

<div> 标签是块级元素。 <a> 标签是标签是一个内联元素。