Rendere l'overlay Div INTERA pagina (non solo viewport)?

93

Quindi ho un problema che penso sia abbastanza comune, ma devo ancora trovare una buona soluzione. Voglio fare in modo che un div overlay copra l'INTERA pagina ... NON solo il viewport. Non capisco perché sia così difficile da fare ... Ho provato a impostare body, html heights al 100% ecc. Ma non funziona. Ecco cosa ho finora:

<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>

Sarei anche aperto a una soluzione in JavaScript, se ne esiste una, ma preferirei di gran lunga usare solo un semplice CSS.

html css

— Polaris878
fonte

Può leggere anche di più qui: stackoverflow.com/questions/1938536/...

— Marco Demaio

Può essere fatto per davvero con jQuery?

— William Entriken

224

Il viewport è tutto ciò che conta, ma probabilmente vuoi che l'intero sito web rimanga oscurato anche durante lo scorrimento. Per questo, vuoi usare al position:fixedposto di position:absolute. Fixed manterrà l'elemento statico sullo schermo durante lo scorrimento, dando l'impressione che l'intero corpo sia oscurato.

Esempio: 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
fonte

3

Potrei sbagliarmi, ma posizionerà il lavoro fisso in IE6 ?! So che probabilmente a nessuno importa più di IE6.

— Marco Demaio

29

@Marco Non sono sicuro. Ad essere onesti, se il supporto per un browser di 10 anni non è esplicitamente richiesto, non mi preoccuperò più :)

— Sampson

5

Allora come lo fate sui dispositivi mobili? bradfrostweb.com/blog/mobile/fixed-position

— BorisOkunskiy

3

+1 Grazie! Ho esteso il tuo esempio aggiungendo una finestra popup sopra l'overlay: jsbin.com/okabo3/740

— kol

il problema che sto riscontrando con questo (che è usato da molti plug-in) è che quando fai clic su un <select>elemento in iOS, si sposta l'intera finestra e praticamente rompe tutto. elementi fissi si muovono, le cose che non dovrebbe scroll scroll, ecc

— 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
fonte

2

La migliore soluzione possibile là fuori. Devi solo attivare la classe "sovrapposta" per il corpo e applicare lo stile sopra al corpo con quel className.

— Sviatoslav Zalishchuk

3

Per favore, spiega meglio questa risposta. Non capisco il commento di Sviatoslav.

— Lonnie Best

1

Prima di tutto, penso che tu abbia frainteso cosa sia il viewport. Il viewport è l'area utilizzata da un browser per visualizzare le pagine web e non puoi in alcun modo costruire i tuoi siti web per sovrascrivere quest'area in alcun modo.

In secondo luogo, sembra che il motivo per cui il tuo overlay-div non coprirà l'intero viewport è perché devi rimuovere tutti i margini su BODY e HTML.

Prova ad aggiungerlo nella parte superiore del tuo foglio di stile: ripristina tutti i margini e le imbottiture su tutti gli elementi. Rende più facile l'ulteriore sviluppo:

* { margin: 0; padding: 0; }

Modifica: ho appena capito meglio la tua domanda. Position: fixed; probabilmente funzionerà per te, come ha scritto Jonathan Sampson.

— Arve Systad
fonte

1

Non dovresti rimuovere il riempimento e i margini da tutto . Potrebbe essere davvero laborioso recuperarli per molti elementi come pulsanti e input del modulo.

— Sampson

1

A mio parere, è solo un modo davvero semplice per trattare tutto più come lo stesso su tutti i browser. Potrebbe non essere applicabile oggi come prima quando mi adattavo a IE5, ma lo faccio ancora come una delle prime cose che scrivo in un foglio di stile.

— Arve Systad

3

@Arve Ti fa avvicinare, ma è meglio usare un foglio di ripristino testato nel tempo. Dai un'occhiata a meyerweb.com/eric/tools/css/reset per maggiori informazioni - ti piacerà, te lo assicuro :)

— Sampson

L'ho visto e penso semplicemente che sia troppo grande :)

— Arve Systad

1

@Arve I ripristini non sono così grandi: prova a riprenderti completamente *{}e vedrai molto di più :)

— Sampson

0

Ho avuto un bel po 'di problemi perché non volevo FISSARE l'overlay in posizione poiché volevo che le informazioni all'interno dell'overlay fossero scorrevoli sul testo. Ero solito:

<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>

Ovviamente il div nel mezzo ha bisogno di alcuni contenuti e probabilmente uno sfondo grigio trasparente, ma sono sicuro che hai capito!

— Benjamin Vaughan
fonte

-6

Ho guardato la risposta di Nate Barr sopra, che sembrava piacerti. Non sembra molto diverso dal più semplice

html {background-color: grey}

— Justin Munce
fonte