（ビューポートだけでなく）ページ全体のオーバーレイを作成しますか？

93

だから私はかなり一般的だと思う問題を抱えていますが、まだ良い解決策を見つけていません。ページ全体を覆うオーバーレイdivを作成したい...ビューポートだけでなく。なぜこれが難しいのかわかりません... body、htmlの高さなどを100％に設定してみましたが、うまくいきません。ここに私がこれまでに持っているものがあります：

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

また、JavaScriptのソリューションがあればそれを受け入れますが、単純なCSSを使用するだけです。

html css

— Polaris878
ソース

また、より多くのここに読むことができます：stackoverflow.com/questions/1938536/...

— マルコDemaio

これはjQueryで実際に実行できますか？

— William Entriken 16

224

重要なのはビューポートだけですが、スクロール中でもWebサイト全体が暗くならないようにしたい場合があります。これには、のposition:fixed代わりに使用したいとしますposition:absolute。固定すると、スクロールしても要素が画面上で静止し、全身が暗くなったような印象になります。

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

— サンプソン
ソース

3

私は間違っているかもしれませんが、IE6での位置固定は機能しますか？おそらく誰もIE6をあまり気にしていないでしょう。

— Marco Demaio、

29

@Marcoわからない。正直なところ、10歳のブラウザのサポートが明示的に要求されていない場合は、もうわざわざするつもりはありません:)

— Sampson

5

では、モバイルデバイスでそれをどのように行うのでしょうか。bradfrostweb.com/blog/mobile/fixed-position

— BorisOkunskiy

3

+1ありがとうございます！オーバーレイの上にポップアップウィンドウを追加して、例を拡張しました：jsbin.com/okabo3/740

— kol

これで多くのプラグインで使用されている問題は<select>、iOSで要素をクリックすると、ビューポート全体が移動し、基本的にすべてが壊れてしまうことです。固定要素の移動、スクロールしてはならないものなど

— 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);
}

— ネイトバー
ソース

2

そこに最高の可能なソリューション。bodyの「オーバーレイされた」クラスをトグルし、そのclassNameでbodyに上記のスタイリングを適用するだけです。

— Sviatoslav Zalishchuk 2013

3

この回答について詳しく説明してください。スヴィアトスラフのコメントがわかりません。

— ロニーベスト

1

まず、ビューポートが何であるかを誤解していると思います。ビューポートは、ブラウザがWebページをレンダリングするために使用する領域であり、この領域を上書きするようにWebサイトを構築することは決してできません。

次に、overlay-divがビューポート全体をカバーしない理由はは、BODYとHTMLのすべてのマージンを削除する必要があるためです。

これをスタイルシートの上部に追加してみてください。すべての要素のすべてのマージンとパディングがリセットされます。さらなる開発を容易にします：

* { margin: 0; padding: 0; }

編集：私はあなたの質問をよりよく理解しました。 Position: fixed; ジョナサン・サンプソンが書いたように、おそらくあなたのためにうまくいくでしょう。

— アルベシスタッド
ソース

1

すべてからパディングとマージンを削除しないでください。ボタンやフォーム入力のような多くの要素でそれらを取り戻すのは本当に面倒かもしれません。

— サンプソン

1

私の意見では、ブラウザ間ですべてを同じように扱うための本当に簡単な方法です。今日はIE5に適応するときに以前ほど多くは適用されないかもしれませんが、スタイルシートで最初に書くことの1つとしてまだ実行しています。

— Arve Systad

3

@Arve近づきますが、代わりに実績のあるリセットシートを使用することをお勧めします。チェックアウトmeyerweb.com/eric/tools/css/resetの詳細については、 -あなたはそれを愛するだろう、私は:)を保証

— サンプソン

私はそれを見た、そしてそれは大きすぎると単純に思う:)

— Arve Systad

1

@Arveリセットはそれほど大きくありません-完全に回復してみて*{}ください。もっとたくさん表示されます:)

— サンプソン

0

オーバーレイ内の情報をテキスト上でスクロールできるようにしたかったので、オーバーレイを所定の位置に修正したくなかったので、かなりの問題がありました。私が使用した：

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

もちろん、真ん中のdivにはコンテンツとおそらく透明な灰色の背景が必要ですが、要点はきっとわかります！

— ベンジャミン・ヴォーン
ソース

-6

上のNate Barrの答えを見てみました。それは単純なものとあまり変わらないようです

html {background-color: grey}

— ジャスティン・マンス
ソース