it-swarm.com.de

Wie erstelle ich ein Overlay-Div nur mit CSS (kein Javascript)?

Ich versuche herauszufinden, wie man ein Div erstellt, das die Seite überlagert und an einer Stelle bleibt, wenn die Seite gescrollt wird, wie in diesem Artikel verwendet: Top 5 Botched PC Game Launches . (Oben sehen Sie eine Leiste mit unbeweglichem Logo , in der die Spieler zu Hause anrufen ).

Ich bin mir nicht mal sicher, wie die korrekte Terminologie lautet - es ist wahrscheinlich keine Überlagerung :) Was auch immer es ist, es scheint nur mit CSS gemacht zu werden, da es angezeigt wird, wenn Javascript deaktiviert ist.

1
Cyclops
#status-bar {
  width: 100%;
  height: 36px;
  position: fixed;
  top: 19px;
  left: 0;
  z-index: 2147483646;
  -moz-box-shadow: 0px 0px 3px #8a8a8a;
  -webkit-box-shadow: 0px 0px 3px #8a8a8a;
  box-shadow: 0px 0px 3px #8a8a8a;
  background: transparent url("/images/Elements/status-bar/status-bar-bg.png") repeat-x;
}

Seitenquelltext.

Verwandte Lektüre: CSS Positioning 101 at A List Apart

3
danlefree

Kleines Wort der Warnung. Wenn Sie aus irgendeinem Grund (ich hoffe, dass IE6 vollständig veraltet ist) wirklich IE6 unterstützen müssen, unterstützt dieser Browser nicht: behoben. Möglicherweise möchten Sie den CSS-Eigenschafts-Hack "_" verwenden, um ihn für den Fall von IE6 auf absolute Position (_position: absolute;) zu setzen. Möglicherweise müssen einige andere Eigenschaften angepasst werden, um ein ähnliches Erscheinungsbild wie bei Nicht-IE6-Versionen zu erzielen und ein Verhalten zu erzielen, das zumindest in Ordnung ist.

1
S.gfx

CSS Code

.picColor{
    width:320px;
    height:240px;
    background: url(img/flower.png) no-repeat;
    border:5px solid #000000;
}
.picColor:hover
{
    opacity:0.9;
    background:#FFFFFF;
    width:320px;
    height:240px;
}

Vollständige Quelle ... CSS-Überlagerung

Justin

0
justinh