CSS Hilfe - make Bild im Element über den oberen Rand

Question

Ich arbeite mit einem PSD-Design im Moment, die einen Teil des Firmenlogos über einem Header-Element sitzt, und einen Teil davon mit darin enthalten. Das Logo überschreitet teilweise die obere Grenze.

Etwas wie dieses: http://img193.imageshack.us/img193/5589/headerrc.png mit dem festen gefüllten Quadrat, das das Logo ist, das die Grenze überschreiten muss.

Ich frage mich, was der beste Weg, dies in der zugänglichsten Weise zu tun ist; Ich weiß, ich kann alles als Bilder aufteilen, aber ich würde lieber HTML-Elemente verwenden, um das Display zu erstellen.

Prost im Voraus.

Answer 1

Sie haben Ihre HTML-Konfiguration überhaupt nicht erklärt, daher kann ich nur sehr allgemein vorschlagen, es ist schwierig zu wissen, welche besser geeignet wäre.

margin-top: -30px; 

alternativ:

position: relative; 
top: -30px; 

Answer 2

Sie könnten nur eine negative Marge in Ihrem CSS das Logo nach oben drücken:

#logo { margin-top: -20px; } 

Answer 3

Man könnte es absolut positionieren und die Koordinaten direkt eingestellt und haben immer noch zentriert, wenn Sie benötigen. Hier ist ein kurzes Beispiel:

 
    #header { 
     margin-top: 30px; 
     width: 100%; 
     height: 100px; 
     position: relative; 
    } 

    #logo { 
     left: 50%; 
     margin-left: 100px; 
     top: 10px; 
     height: 50px; 
     width: 50px; 
     position: absolute; 
    } 

Sie können das margin-left auf einen beliebigen Wert es, dass die Entfernung von der Mitte zu positionieren. Solange das "Top" von #logo kleiner ist als das "Rand-Top" von #header, wird es über dem Header platziert.