位置相對和絕對差距（三角形）

我有點驚訝，當我用: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

位置相對和絕對差距（三角形）

回答

相關問題