Positionieren einer Kopfzeile ohne den Rest der Seite nach unten zu verschieben

Question

Ich bin neu in CSS und ich versuche, meine Kopfzeile buchstäblich ein paar Pixel nach unten zu positionieren, ohne den Rest der Seite nach unten zu bewegen.

Ich habe versucht padding-bottom aber es bewegt sich die Seite nach unten, versuchte Rand unten und es tut nichts. Versucht schweben, ausrichten. Zeilenhöhe hat aus irgendeinem Grund keine Wirkung. Die einzige Sache, die einen leichten Effekt hat, ist position: absolute; und line-height arbeitete in Verbindung damit, aber es bewegte es gerade ein wenig zu weit unten und jetzt ich brauche es nur ein paar Pixel höher. Die line-height wird nicht mehr als 2px erhöhen und ich habe auch versucht,% in allen oben genannten zu verwenden.

Hat jemand eine Lösung für das Problem, bevor ich Position verwendet: absolut ein auch das Problem habe ich jetzt mit line-height Einschränkungen.

h2 { 
    padding-left: 45%; 
    position: absolute; 
    line-height: 2px; 
} 

Answer 1

Sie diese Position finden können: absolute finden Sie einige Probleme verursachen. Dies liegt daran, dass Sie es aus dem normalen Fluss nehmen, so dass es seinen Platz nicht mehr behalten wird. Wenn Probleme auftreten, versuchen Sie stattdessen position: relative. Das sollte es im Fluss behalten und mit top kombiniert werden: 2px sollte es ein wenig nach unten verschieben.

Einige andere Optionen, die Sie auch ausprobieren können, schließen margin-top ein: 2px oder padding-top: 2px (bei Verwendung der Position: relativ). Der Grund, warum padding-bottom nicht funktionierte, lag darin, dass Sie etwas mehr "padding"/Leerzeichen unterhalb und nicht darüber hinzufügten.

Macht das Sinn? Bitte stellen Sie Fragen.

Answer 2

Wenn Sie position: absolute Marge Zugabe nicht Position auswirken.

Versuchen Sie mit top: 2px wird es das Element 2 Pixel von oben nach unten positionieren. Auch line-height: 2px sieht ziemlich hacky, es sei denn, die Schriftgröße ist 1px würde ich nicht verwenden.

h2 { 
    padding-left: 45%; 
    position: absolute; 
    top: 2px; 
} 

Mehr über Position Eigenschaft: http://www.w3schools.com/cssref/pr_class_position.asp