Membuat overlay Div SELURUH halaman (bukan hanya viewport)?

97

Jadi saya memiliki masalah yang menurut saya cukup umum tetapi saya belum menemukan solusi yang tepat. Saya ingin membuat penutup div overlay SELURUH halaman ... BUKAN hanya viewport. Saya tidak mengerti mengapa ini sangat sulit dilakukan ... Saya sudah mencoba mengatur body, html heights menjadi 100% dll tetapi itu tidak berhasil. Inilah yang saya miliki sejauh ini:

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

Saya juga akan terbuka untuk solusi dalam JavaScript jika ada, tetapi saya lebih suka hanya menggunakan beberapa CSS sederhana.

html css Polaris878
sumber
Dapat membaca lebih lanjut di sini: stackoverflow.com/questions/1938536/…
Marco Demaio
Bisakah ini dilakukan secara nyata dengan jQuery?
William Entriken

Jawaban:

228

Area pandang adalah yang terpenting, tetapi Anda mungkin ingin seluruh situs web tetap digelapkan bahkan saat menggulir. Untuk ini, Anda ingin menggunakan position:fixedbukan position:absolute. Fixed akan membuat elemen statis di layar saat Anda menggulir, memberikan kesan bahwa seluruh bodi digelapkan.

Contoh: 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
sumber
3
Saya mungkin salah, tetapi akankah posisi tetap berfungsi di IE6 ?! Saya tahu mungkin tidak ada yang terlalu peduli tentang IE6.
Marco Demaio
29
@MarcuTidak yakin. Sejujurnya, jika dukungan untuk browser berusia 10 tahun tidak secara eksplisit diminta, saya tidak akan repot lagi :)
Sampson
5
Jadi bagaimana kalian melakukannya di perangkat seluler? bradfrostweb.com/blog/mobile/fixed-position
BorisOkunskiy
3
+1 Terima kasih! Saya memperluas contoh Anda dengan menambahkan jendela sembulan di atas hamparan: jsbin.com/okabo3/740
kol
Masalah yang saya alami dengan ini (yang digunakan oleh banyak plugin) adalah saat Anda mengklik <select>elemen di iOS, elemen ini menggerakkan seluruh area pandang dan pada dasarnya merusak semuanya. elemen tetap bergerak, hal-hal yang seharusnya tidak menggulir, dll.
billynoah
16 
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
sumber
2
Solusi terbaik di luar sana. Anda cukup mengaktifkan kelas "overlay" untuk body dan menerapkan gaya di atas ke body dengan className tersebut.
Sviatoslav Zalishchuk
3
Tolong jelaskan jawaban ini lebih lanjut. Saya tidak mengerti komentar Sviatoslav.
Lonnie Best
1

Pertama-tama, saya pikir Anda telah salah paham tentang apa itu viewport. Area pandang adalah area yang digunakan browser untuk merender halaman web, dan Anda tidak dapat membangun situs web dengan cara apa pun untuk menimpa area ini dengan cara apa pun.

Kedua, tampaknya alasan overlay-div Anda tidak menutupi keseluruhan viewport adalah karena Anda harus menghapus semua margin pada BODY dan HTML.

Coba tambahkan ini di bagian atas stylesheet Anda - ini menyetel ulang semua margin dan paddings pada semua elemen. Membuat pengembangan lebih lanjut lebih mudah:

* { margin: 0; padding: 0; }

Sunting: Saya baru saja memahami pertanyaan Anda dengan lebih baik. Position: fixed; mungkin akan berhasil untuk Anda, seperti yang ditulis oleh Jonathan Sampson.

Arve Systad
sumber
1
Anda tidak boleh menghapus bantalan dan margin dari semuanya . Ini bisa sangat melelahkan untuk mendapatkannya kembali untuk banyak elemen seperti tombol dan input formulir.
Sampson
1
Menurut pendapat saya, ini hanya cara yang sangat mudah untuk memperlakukan semuanya lebih sama di semua browser. Mungkin tidak berlaku sebanyak hari ini seperti sebelumnya ketika beradaptasi dengan IE5, tetapi saya masih melakukannya sebagai salah satu hal pertama yang saya tulis di stylesheet.
Arve Systad
3
@Arve Ini membuat Anda dekat, tetapi lebih baik menggunakan lembar reset yang telah teruji waktu sebagai gantinya. Lihat meyerweb.com/eric/tools/css/reset untuk informasi lebih lanjut - Anda akan menyukainya, saya jamin :)
Sampson
Saya pernah melihatnya, dan menurut saya itu terlalu besar :)
Arve Systad
1
@Arve Penyetelan ulang tidak terlalu besar - coba pulihkan sepenuhnya dari *{}dan Anda akan melihat lebih banyak lagi :)
Sampson
0

Saya mengalami sedikit masalah karena saya tidak ingin MEMPERBAIKI overlay di tempatnya karena saya ingin info di dalam overlay dapat di-scroll di atas teks. Saya menggunakan:

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

Tentu saja div di tengah membutuhkan beberapa konten dan mungkin latar belakang abu-abu transparan tapi saya yakin Anda mengerti intinya!

Benjamin Vaughan
sumber
-6

Saya melihat jawaban Nate Barr di atas, yang sepertinya Anda sukai. Sepertinya tidak jauh berbeda dari yang lebih sederhana

html {background-color: grey}
Justin Munce
sumber