html - 相对位置和绝对位置(三 Angular 形)有什么区别？

Question

当我使用 :after 伪类创建三 Angular 形时，我有点惊讶。为什么绝对位置工作正常但相对位置不工作。看下面的代码

.test {
  position: relative;
}

.abs {
  position: absolute;
  left: 180px;
  top: 0px;
  background: red;
  width: 300px;
  padding: 10px;
}

.abs:after {
  position: absolute; /* by changing this value to relative */
  left: -20px;
  top: 0px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid blue;
  width: 0;
  height: 0;
  content: " ";
}

<div class="test">
  <input type="text" />
  <div class="abs">enter your name</div>
</div>

demo with absolute | demo with relative

谁能想象出这是什么原因？

Answer 1

原因是您用来创建三 Angular 形的技术不适用于内联元素，并且 :after 伪元素默认是内联的。查看具有简单跨度的测试:http://jsfiddle.net/YBLpL/ .

根据section 9.7 of the CSS 2 specification，当您使用position: absolute 时，内联元素被视为一个 block 。 .

---

注意:虽然您的问题似乎是关于绝对与相对的含义，但实际上是关于三 Angular 形的破损形状，正如您在对答案的评论(包括一个已删除的答案)中所阐明的那样。您应该编辑问题以阐明您的观点。