CSS-Header nicht anspaut.Das Versuch, das Logo mit der Top -20px-Ruhezustand anzuzeigen, nicht

StackOverflow https://stackoverflow.com//questions/25091650

  •  02-01-2020
  •  | 
  •  

Frage

Ich versuche, eine Header-Leiste herzustellen, die ein Bild enthält, gefolgt von einem Titel und einem Menüauto. Die Leiste wird nach 50px angezeigt, und ich möchte, dass das Bild etwas bewegt wird, so dass es über der Oberseite des Wrapping-DIV auftaucht und ein Bit in den 50px oben zeigt. Verwenden der Position Absolut auf der Wickelung DIV und der Position relativ mit dem Bild, das es mit dem Bild verschieben, funktioniert dann mit 20px, aber wenn ich dies den Rest der Elemente im DIV tue, bleiben sie darunter. Gibt es eine Möglichkeit, diese anderen Elemente zu bewegen, denen sie mit dem Bild inline sind?

Ich habe ein einfaches jsfiddle von dem gemacht, was ich hier versuche: http://jsfiddle.net/ 67stt /

html:

generasacodicetagpre.

css:

generasacodicetagpre.

Ich brauche den Titel und das Menü, um in der Mitte des Bildes (der roten Box) aufzurufen.

Verwenden der Position: Absolut bewegt sie an die Spitze, die in Ordnung ist, aber der Titel und die Menüebene oben aufeinander.

Ich weiß, dass ich das verwenden könnte, und geben Sie das Menü etwas auf der linken Seite, sodass sie neben dem Titel leuchtet, aber wenn die Seitengröße reduziert wird, wird das Menü unter dem Bild und dem Titel bewegt, sodass ich nicht möchte, dass die Paddierung angezeigt wird Dann, und ich würde lieber nicht mit einem hacky jquery-Weg kommen, um das zu verwalten, wenn er nur in CSS erfolgen kann.

War es hilfreich?

Lösung

so? http://jsfiddle.net/67sttT/1/

add:

generasacodicetagpre.

zum Menü und Titel

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top