Question

在使用:after伪类创建三角形时，我感到很惊讶。为什么位置绝对工作正常而不是相对位置。请看下面的代码

HTML

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

CSS

.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: " ";
}

demo with absolute | demo with relative

有人可以说明原因吗？

Answer 1

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

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

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

Answer 2

：psudo类在.abs div的内容之后添加内容但是.abs div的子节点。这可以解释插入内容的相对和绝对行为。

当您将插入的内容位置设为相对位置时，它应该位于原始内容之后，即＆＃34;输入您的姓名＆＃34;因为它是视觉流的一部分。然而，如果你把它做成绝对的，它就会从视觉流中移除，因此它位于开头或左边，相对于父.abs div的正确值。

位置相对与绝对之间的差异（三角形）

2 个答案: