＆::前僞元素不正確對齊 - CSS（3）框模型 - LESS

我想添加一個圖像與& ::僞元素之前，並將其放在它的父元素的頂部通過調整填充/保證金。我無法將img放在它的父元素的「頂部」。它駐留在父項的框中。我試圖設置這兩個元素來顯示：塊。我試圖使用相對/絕對位置。我調整了利潤/填充而沒有解決方案。＆::前僞元素不正確對齊 - CSS（3）框模型 - LESS

HTML：

<div class="foo"> 
<div class="title">title</div> 
<div class="body">text</div> 
</div>

LESS/CSS：

.foo { 
    display:block; 
    padding: 1em; 

    &:before { 
    background-image: url("bar.svg"); 
    padding: .25in; 
    background-repeat: no-repeat; 
    background-position: top left; 
    background-position: top outside; 
    background-color: white; 
    content: ""; 
    display: block; 
    max-width: (@column + .45in);  
    margin-left: -.15in; 
    margin-top:-.5in; 
    } 
}

我希望調整僞元素在邊緣的值會產生預期的結果。然而，這種情況並非如此。有沒有我不知道的限制？

感謝您的時間和您的幫助。

來源

2012-10-27 Jessica Burnett

首先，我假設「在上面」意味着在「.foo」元素之前顯示「之前」。我假設你根據你的代碼試圖做什麼。通常情況下，我會將「頂部」解釋爲更高的z-index並重疊一個元素，但我不認爲這就是您要求的。第二，除非我不熟悉某些東西（絕對有可能），否則關於background-position的關鍵字不存在outside;否則，outside關鍵字不存在。因此，這似乎是一個錯誤（儘管我不希望它會導致你面臨的問題）。

三，我會認爲你的基本前提應該是。 This fiddle demonstrates a shifting of the :before element to be "before" its .foo parent。這可能是你的em單位和in單位的混合使用引起一些問題。這不會是確保您獲得所需定位的好方法。我會保留你的單位em。

來源

2012-10-29 01:21:25 ScottS

＆::前僞元素不正確對齊 - CSS（3）框模型 - LESS

回答

相關問題