css - &::before 伪元素未正确对齐 - CSS(3) 盒模型 - LESS

Question

我正在尝试使用 &::before 伪元素添加图像，并通过调整填充/边距将其放置在父元素之上。我无法将 img 放在其父元素的“顶部”。它驻留在 parent 的盒子里。我尝试将这两个元素都设置为 display:block。我试图使用相对/绝对定位。我在没有解决方案的情况下调整了边距/填充。

HTML:

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

更少/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 并与元素重叠，但我认为这不是您要问的。

其次，除非我不熟悉某些东西(绝对有可能)，否则background-position 没有outside 关键字；因此，这似乎是一个错误(尽管我不认为它会导致您遇到的问题)。

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