位置相对和绝对差距（三角形）

我有点惊讶，当我用: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

任何人都可以描述此原因吗？

来源

2013-10-06 Bhojendra Nepal

相对位置与页面的流向保持一致。自然，在文本后面添加的任何内容“输入你的名字”都会显示在那里（例如content：“。”）'输入你的名字。'因此，相对于期限所在的位置，在周期的左侧20个像素的位置（与文本重叠）。绝对定位盒子使其位于距离最近的相对定位的容纳盒（测试）的x，y位置。如果您的输入宽度发生变化，这将是一个问题，因为测试包含您的输入和您的abs。 – RedGlobe

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

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

注：虽然你的问题似乎是关于绝对和相对意义，它实际上是对三角形的破碎形状，如您在评论的答案澄清（包括一个已删除的答案）。你应该编辑这个问题来澄清你的观点。

来源

2013-10-06 05:42:37 bfavaretto

谢谢。明白了原因是内联..... –

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

当你使插入的内容位置相对，它应该在原始内容之后，即“输入你的名字”，因为它是视觉流的一部分。而如果你将其设置为绝对值，则它将从视觉流中移除，因此它定位在开始位置或按照左侧，相对于父.abs div的右侧值。

来源

2013-10-06 05:01:37

你能想像为什么亲戚正在创造三角形的点是如此吗？ –

如果是这样，给予z-index值应该显示，但它不会.... –

@ C-Link嗯，这比它想象的要多。将研究它。 – bfavaretto

位置相对和绝对差距（三角形）

回答

相关问题