Div Overlay GESAMTE Seite überlagern (nicht nur Ansichtsfenster)?

93

Ich habe also ein Problem, von dem ich denke, dass es ziemlich häufig ist, aber ich habe noch keine gute Lösung dafür gefunden. Ich möchte, dass ein Overlay-Div die GESAMTE Seite abdeckt ... NICHT nur das Ansichtsfenster. Ich verstehe nicht, warum das so schwer zu tun ist ... Ich habe versucht, Körper-, HTML-Höhen auf 100% usw. einzustellen, aber das funktioniert nicht. Folgendes habe ich bisher:

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

Ich wäre auch offen für eine Lösung in JavaScript, falls es eine gibt, aber ich würde viel lieber nur ein einfaches CSS verwenden.

html css Polaris878
quelle
Lesen Sie hier auch mehr: stackoverflow.com/questions/1938536/…
Marco Demaio
Kann dies mit jQuery wirklich durchgeführt werden?
William Entriken

Antworten:

224

Das Ansichtsfenster ist alles, was zählt, aber Sie möchten wahrscheinlich, dass die gesamte Website auch beim Scrollen dunkel bleibt. Hierfür möchten Sie position:fixedstatt verwenden position:absolute. Behoben hält das Element beim Scrollen statisch auf dem Bildschirm und vermittelt den Eindruck, dass der gesamte Körper abgedunkelt ist.

Beispiel: http://jsbin.com/okabo3/edit

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}
<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>
Sampson
quelle
3
Ich könnte mich irren, aber wird feste Arbeit in IE6 positionieren?! Ich weiß, dass sich wahrscheinlich niemand mehr um IE6 kümmert.
Marco Demaio
28
@ Marco Nicht sicher. Um ehrlich zu sein, wenn die Unterstützung für einen 10-jährigen Browser nicht ausdrücklich angefordert wird, werde ich mich nicht mehr darum kümmern :)
Sampson
5
Wie macht ihr es auf mobilen Geräten? bradfrostweb.com/blog/mobile/fixed-position
BorisOkunskiy
3
+1 Danke! Ich habe Ihr Beispiel erweitert, indem ich ein Popup-Fenster über dem Overlay hinzugefügt habe
kol
Das Problem, das ich damit habe (das von vielen Plug-Ins verwendet wird), ist, dass beim Klicken auf ein <select>Element in iOS das gesamte Ansichtsfenster verschoben wird und im Grunde alles kaputt geht. Feste Elemente bewegen sich, Dinge, die nicht scrollen sollten, scrollen usw.
Billynoah
15 
body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
Nate Barr
quelle
2
Die bestmögliche Lösung da draußen. Sie schalten einfach die "überlagerte" Klasse für den Körper um und wenden das obige Styling mit diesem Klassennamen auf den Körper an.
Sviatoslav Zalishchuk
3
Bitte erläutern Sie diese Antwort genauer. Ich verstehe Sviatoslavs Kommentar nicht.
Lonnie Best
1

Zunächst einmal denke ich, dass Sie das Ansichtsfenster falsch verstanden haben. Das Ansichtsfenster ist der Bereich, den ein Browser zum Rendern von Webseiten verwendet, und Sie können Ihre Websites in keiner Weise erstellen, um diesen Bereich in irgendeiner Weise zu überschreiben.

Zweitens scheint der Grund dafür, dass Ihr Overlay-Div nicht das gesamte Ansichtsfenster abdeckt, darin zu liegen, dass Sie alle Ränder in BODY und HTML entfernen müssen.

Versuchen Sie, dies oben in Ihrem Stylesheet hinzuzufügen - es setzt alle Ränder und Auffüllungen aller Elemente zurück. Erleichtert die weitere Entwicklung:

* { margin: 0; padding: 0; }

Edit: Ich habe deine Frage gerade besser verstanden. Position: fixed; wird wahrscheinlich für Sie klappen, wie Jonathan Sampson geschrieben hat.

Arve Systad
quelle
1
Sie sollten nicht Polster und Ränder von allem entfernen . Es könnte sehr mühsam sein, diese für viele Elemente wie Schaltflächen und Formulareingaben zurückzugewinnen.
Sampson
1
Meiner Meinung nach ist es nur eine sehr einfache Möglichkeit, alles in allen Browsern gleich zu behandeln. Könnte heute nicht mehr so ​​viel zutreffen wie früher, als ich mich an IE5 anpasste, aber ich mache es immer noch als eines der ersten Dinge, die ich in ein Stylesheet schreibe.
Arve Systad
3
@Arve Es bringt Sie in die Nähe, aber es ist besser, stattdessen ein bewährtes Reset-Blatt zu verwenden. Weitere Informationen finden Sie unter meyerweb.com/eric/tools/css/reset - Sie werden es lieben, das versichere ich Ihnen :)
Sampson
Ich habe es gesehen und finde es einfach zu groß :)
Arve Systad
1
@Arve Die Resets sind nicht so groß - versuchen Sie es vollständig *{}und Sie werden viel mehr sehen :)
Sampson
0

Ich hatte einige Probleme, da ich das Overlay nicht fixieren wollte, da die Informationen im Overlay über den Text gescrollt werden sollten. Ich benutzte:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

Natürlich braucht der Div in der Mitte etwas Inhalt und wahrscheinlich einen transparenten grauen Hintergrund, aber ich bin sicher, Sie verstehen das Wesentliche!

Benjamin Vaughan
quelle
-6

Ich habe mir oben Nate Barrs Antwort angesehen, die Ihnen zu gefallen schien. Es scheint nicht sehr anders zu sein als das einfachere

html {background-color: grey}
Justin Munce
quelle