2

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

疑似要素のマージンの値を調整すると、期待どおりの結果が得られると思います。ただし、そうではありません。知らない制限はありますか？

あなたの時間とあなたの助けに感謝します。

4

2 に答える 2

1

First, I assume by "on top" you mean displayed "before" the .foo element. I assume that based on what it appears you are trying to do with your code. Normally, I would interpret "on top" as a higher z-index and overlapping an element, but I don't think that is what you are asking.

第二に、私が何かに慣れていない限り（間違いなく可能です）、;のoutsideキーワードはありません。background-positionしたがって、それはエラーのように見えます (ただし、直面している問題が発生するとは思いません)。

第三に、あなたの基本的な前提は機能していると思います。このフィドルは、要素がその親の:before「前」に.foo移動することを示しています。emユニットとユニットの混合使用がin問題を引き起こしている可能性があります。それはあなたが望むポジショニングを得ることを保証する良い方法ではありません. 私はあなたのユニットをem.

于 2012-10-29T01:21:25.443 に答える