2

:after当我使用伪类创建三角形时，我并不感到惊讶。为什么绝对位置可以正常工作，但相对位置却不行。看下面的代码

.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>

绝对演示| 与亲戚演示

谁能想象一下这其中的原因？

4

2 回答 2

2

原因是您用于创建三角形的技术不适用于内联元素，并且:after伪元素默认情况下是内联的。查看一个简单跨度的测试：http: //jsfiddle.net/YBLpL/。

根据CSS 2 规范的第 9.7 节，当您使用position: absolute时，内联元素被视为一个块。

注意：尽管您的问题似乎是关于绝对与相对的含义，但实际上是关于三角形的破碎形状，正如您在对答案的评论中澄清的那样（包括一个已删除的答案）。您应该编辑问题以澄清您的观点。

于 2013-10-06T05:42:37.660 回答
0

:after psudo 类在 .abs div 的内容之后添加内容，但它是 .abs div 的子级。这将解释插入内容的相对和绝对行为。

当您使插入的内容位置相对时，它应该位于原始内容之后，即“输入您的姓名”，因为它是视觉流程的一部分。而如果你把它设为绝对，它就会从视觉流中移除，因此它定位在开头或相对于父 .abs div 的左、右值。

于 2013-10-06T05:01:37.067 回答