Wie? CSS "Position: Absolut" Konstante Margin-Top? Möglich?

Diese Frage hört sich einfach an, aber ich bin ein Experte für CSS und ich denke, es ist unmöglich (eine SELBST-Sache).Wie? CSS "Position: Absolut" Konstante Margin-Top? Möglich?

Ist es möglich, CSS zu verwenden, um <div> einen konstanten oberen Rand zu geben, wenn das <div> keinen Hintergrund hat (z. B. können Sie hindurchsehen)?

Grundsätzlich möchte ich das Hintergrundbild in den oberen 100px einer Website sichtbar sein, so dass auch beim Scrollen nach unten dieser obere Rand bleibt.

Sie können hier zu einem bestimmten Live-Code aussehen:
http://www.codemyconcepthq.com/projects/2453/

Hier ist eine kleine Infografik von dem, was ich bin versucht zu tun:
http://cl.ly/40bD

Dank!

Quelle

2011-01-14 Brian

Können Sie diese Frage bitte in anderen Begriffen erklären? Ich habe eine harte Zeit, da ich glaube, dass es bereits gelöst wurde ... – tekknolagi

Beachten Sie in der Infografik, wie das Logo hinter der oberen Navigationsleiste geht? Nun, das soll es nicht tun. Es sollte vielmehr vollständig verschwinden. Dies kann mit einem Rand oben auf der rechten Seite gemacht werden, der DIV enthält, aber das Problem ist, dass wenn Sie scrollen, das Logo hinter die Navigationsleiste geht, was ich versuche zu vermeiden. Ich suche einen "klebrigen" oberen Rand. – Brian

Ich denke, die Art und Weise, wie Sie dies normalerweise tun, ist nur die obere Navigationsleiste nicht transparent. Ein Ansatz wäre, die Inhaltsbox zu umbrechen und 'overflow: scroll' zu setzen und dann sicherzustellen, dass der Rest der Seite 100% Browserhöhe nicht überschreitet (damit Sie nicht mit zwei Bildlaufleisten enden). – robertc

Eine Lösung, die Sie versuchen könnten, ist, den oberen Rand des Hintergrunds zu schneiden (dieses Bild: http://www.codemyconcepthq.com/projects/2453/images/bg-body.png) und Sie legen es als Hintergrund Ihrer Kopfzeile fest.

Also, wenn Sie nach unten scrollen, wird der Inhalt unter Ihre Kopfzeile gehen und Sie werden diesen Inhalt nicht sehen, weil Ihre Kopfzeile einen Hintergrund haben wird.

Edit:

Statt den Hintergrund des Schneidens wie gesagt, nur den Hintergrund der Kopfzeile auf das gleiche Bild für den Haupt-Hintergrund verwendet gesetzt. Das verhindert, dass der Browser zwei Bilder herunterladen muss (was nutzlos ist, weil die Bilder gleich sind).

Quelle

2011-01-14 02:05:37

Schön! Genau das habe ich gesucht, ich konnte einfach nicht daran denken! Magnifique! Ich werde tun, nur eine absolute positioniert oben in der Mitte DIV, die die gleiche Hintergrundbild oben in der Mitte (Last nur einmal) verwendet und hat eine Z-Index höher als die der rechten Seite Inhalt und niedriger als die navbar !!! – Brian

auf den Code der Suche, ich denke, das Beste, was Sie ist <div id="header"> andere <div> Pop tun können, um <div id="header">, die <body> ‚s Hintergrundbild anwenden und dann anwenden, um Ihre durchscheinend Bild auf die <div> Sie nach innen setzen. Dann wird der scrollende Inhalt durch den neuen Hintergrund von <div id="header"> ausgeblendet.

So HTML:

<div id="header"><!-- Begin Header --> 
    <div id="header-inner"> 
    </div> 
</div>

und CSS:

#header { 
    background:url("../images/bg-body.png") no-repeat fixed center top #000000; 
} 

#header-inner { 
    background:url("../images/bg-menu.png") repeat-x scroll 0 0 transparent; 
}

Quelle

2011-01-14 02:08:04

ahhhh! Das ist genau das, was Marc gesagt hat ... Ich musste es ihm geben, seit er zuerst geantwortet hat ... LOL! Schau dir meinen Kommentar an, bevor ich deine Antwort hier gesehen habe! – Brian

Yup - Ich antwortete langsamer, weil ich funktionierenden Code in meinem beinhaltete :) Naw, froh, dass du eine Lösung hast. –

Sie können den gleichen Effekt erzielen, indem eine nicht-transparenten Hintergrund platzieren, die genau das gleiche wie der Hintergrund hinter dem Kopfteil ist , in der gleichen Gegend, und haben Sie den Inhalt (#wrapper in Ihrem Fall?) hinter das gehen.

Quelle

2011-01-14 02:10:54 sinelaw

Wie? CSS "Position: Absolut" Konstante Margin-Top? Möglich?

Antwort

Verwandte Themen