位置:绝对；左撇子不能正常工作

Question

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

    <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%;
}

在上述两种代码中，包含的块(处于相对位置)总是内联元素，那么为什么结果是不同的呢？

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% of 0是0，所以什么都不会发生。

您所做的当然是有效的，但是在内联元素中包含块元素会使rendring变得有点棘手。从规格可以读到：

当内联框包含流内块级框时，内联框(及其在同一行框中的内联祖先)在块级框(以及任何连续或仅由可折叠空格和/或流外元素分隔的块级兄弟姐妹)周围断开，s将内联框划分为两个框(即使其中任何一方为空)，块级框(Es)的两侧各有一个。中断之前和中断后的行框都包含在匿名块框中，而块级框则成为这些匿名框的兄弟。当这样的内联框受到相对定位的影响时，任何由此产生的转换都会影响内联框中包含的块级框。

是的，不容易理解，但是让我们以我们的例子为例，添加更多的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>标记是一个内联元素。