Position:absolute; left 属性无法正常工作

Question

在下面的代码笔中 - https://codepen.io/tanmaylodha/pen/MWKXJWW CSS:Line-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 绝对定位元素在其包含块的 50% 宽度后得到正确定位 .parent

 <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

请使用这个...

.section-first {
  position: relative;
}

而不是下面的样式。

.section-first a {
  position: relative;
}

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

Answer 2

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

.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（无背景着色），这就是您在第一个代码中面临的情况。 0 的 left:X% 是 0 所以什么都不会发生。

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

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

是的，不容易理解，但让我们举个例子，添加更多 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

Position:absolute; left 属性无法正常工作

Position:absolute; left property not working correctly

css

inline

css-position

absolute

Position:absolute; left 属性 无法正常工作

Position:absolute; left property not working correctly

css

inline

css-position

absolute

Position:absolute; left 属性无法正常工作