&::before Pseudo-element nicht korrekt ausgerichtet - CSS(3) - Box-Modell - WENIGER

Ich versuche, fügen Sie ein Bild mit der &::before pseudo-element und platzieren Sie es auf der Oberseite des Eltern-Elements durch die Anpassung der padding/margin. Ich habe nicht in der Lage, die img "on top" des Eltern-Elements. Es befindet sich in der box des übergeordneten Elements an. Ich habe versucht, beide Elemente auf display:block. Ich habe versucht, verwenden Sie relative/absolute position. Ich habe die Seitenränder angepasst/Polsterung ohne eine Lösung.

HTML:

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

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

Ich würde erwarten, dass die Anpassung der Wert der Margen auf das pseudo-element erzeugen würde, das erwartete Ergebnis. Dies ist jedoch nicht der Fall. Gibt es eine Begrenzung, ich bin bewusst?

Vielen Dank für Ihre Zeit und Ihre Hilfe.

InformationsquelleAutor Jessica Burnett | 2012-10-27

  1. 1

    Erste, ich nehme an, von "oben" meinst du angezeigt "vor" der .foo element. Ich gehe davon aus, dass, basierend auf, was es scheint, Sie versuchen, mit Ihrem code. Normalerweise würde ich interpretieren "on top" als eine höhere z-index und überlappend auf ein element, aber ich glaube nicht, dass das ist, was Sie stellen.

    Zweite, es sei denn, ich bin nicht vertraut mit etwas (durchaus möglich), gibt es keine outside Schlüsselwort für background-position; deshalb, scheint ein Fehler (obwohl ich würde nicht erwarten, dass es Ursache das Problem, das Sie Gesicht).

    Dritte, ich würde denken, dass Ihre grundlegende Prämisse arbeiten, sollten. Diese Geige zeigt eine Verschiebung des :before element "vor" Ihrer .foo parent. Es könnte sein, Ihrer gemischten Nutzung em Einheiten und in Einheiten verursacht einige Probleme. Wäre das nicht ein guter Weg, um sicherzustellen, bekommen Sie die Positionierung, die Sie wollen. Ich würde halten Sie Ihre Einheiten in em.

    InformationsquelleAutor ScottS

Schreibe einen Kommentar