＆::前伪元素不正确对齐 - 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

回答

相关问题