Question

我正在尝试使用＆amp; :: before之前的元素添加图像，并通过调整填充/边距将其放在它的父元素之上。我无法将img放在它的父元素的“顶部”上。它位于父级的框内。我试过设置两个元素来显示：块。我试图使用相对/绝对位置。我没有解决方案就调整了边距/填充。

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。可能是您em单位和in单位的混合使用导致了一些问题。这不是确保您获得所需定位的好方法。我会将您的单位保留在em。

Answer 2

伪元素默认内联显示。此外，它们被放置在元素的内容区域内。

要使其显示在该元素的“顶部”，请将显示设置为阻止。

最后，伪元素应该使用 content 属性进行初始化。

.foo::before { 
 content: url(./bar.svg);
 display: block;
}

＆amp; ::在伪元素未正确对齐之前 - CSS（3）Box模型 - LESS

2 个答案: