＆::伪元素未正确对齐之前-CSS（3）盒子模型-少

Question

我正在尝试通过&::before伪元素添加图像，并通过调整填充/边距将其放置在其父元素的顶部。我无法将img放在其父元素的“顶部”。它位于父级的框内。我尝试将两个元素都设置为display:block。我试图使用相对/绝对定位。我已经调整了边距/填充，但没有解决办法。

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;
  }
}

我希望调整伪元素上的边距值会产生预期的结果。然而，这种情况并非如此。我不知道有什么限制吗？

感谢您的时间和帮助。

Answer 1

[首先，我假设“在最上面”是指显示在.foo元素之前。我假设基于您的外观，您正在尝试使用您的代码。通常，我会将“顶部”解释为较高的z-index并与元素重叠，但我不认为这就是您要的内容。

[其次，除非我不熟悉（肯定有可能），否则outside没有background-position关键字；因此，这似乎是一个错误（尽管我不希望它导致您遇到的问题）。

第三，我认为您的基本前提应该起作用。 This fiddle demonstrates a shifting of the :before element to be "before" its .foo parent。 :before单位和.foo单位的混合使用可能会引起一些问题。那不是确保您获得所需定位的好方法。我会将您的单位保留在em中。