オーバーレイdivは、スクロール時を含む親div全体を埋め込みます。

div全体を塗りつぶすオーバーレイがあります。オーバーレイdivは、スクロール時を含む親div全体を埋め込みます。

HTML：

<div class="phone"> 
    <div class="overlay"></div> 
</div>

CSS：

.phone { 
     position: relative; 
     width: 300px; 
     height: 500px; 
     padding: 15px; 
     background: #F2F4F5; 
     overflow: hidden; 
     cursor: default; 
    } 

    .overlay { 
     display: none; 
     background: rgba(27, 35, 41, 0.5); 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     z-index: 1; 
    }

私は.phoneのdivにコンテンツを追加し、いくつかのJSを持っていると、コンテンツが追加された場合、それは自動的に.phoneのdivの下にスクロールします。ただし、オーバーレイは300x500の元のサイズに合わせて伸びるだけです。だから、それが下にスクロールするオーバーレイは、もはやdiv全体をカバーしていません。

オーバーレイにposition: fixedを追加すると、.phone divの代わりに画面全体が塗りつぶされます。

出典

2016-05-06 frosty

を与える親は、すべてが動作しているようですか？あなたはあなたのjsを含めることができますか？ https://jsfiddle.net/eewp92my/1/ – jbrya029

'.phone' divの中にコンテンツを追加しますか？もしそうなら、あなたのコードはFF46.0.1で正常に動作します – dippas

オーバーレイを.phone divの外側に配置し、body要素の子になるようにします。次に、Bodyを相対位置に設定します。

HTML

<body> 
    <div class="overlay"></div> 
    <div class="phone"></div> 
</body>

CSS：

body { 
    position:relative; 
} 
.overlay { 
     display: none; 
     background: rgba(27, 35, 41, 0.5); 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     z-index: 1; 
} 

.phone { 
     width: 300px; 
     height: 500px; 
     padding: 15px; 
     background: #F2F4F5; 
     overflow: hidden; 
     cursor: default; 
    }

出典

2016-05-06 21:42:39 Korgrue

あなたが彼に固定位置を与えると、彼は次のようになります。

top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;

体ではなく、あなたのdivにあればあなたは、彼がハイのフルサイズを取るようにしたいsのあなたは彼に

height:100%; 
    width:100%;

.phone { 
 
     position: relative; 
 
     width: 300px; 
 
     height: 500px; 
 
     padding: 15px; 
 
     background: red; 
 
     overflow: hidden; 
 
     cursor: default; 
 
    } 
 

 
    .overlay { 
 
    /* display: none;*/ 
 
     background: pink; 
 
     position: absolute; 
 
     /*top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     right: 0;*/ 
 
     height:100%; 
 
     width:100%; 
 
     z-index: 1; 
 
    }

<div class="phone"> 
 
    <div class="overlay"></div> 
 
</div>

出典

2016-05-06 21:43:37 DanyCode

ああ、この方法が私にとってうまくいかない理由です。オーバーレイを固定に設定するのを忘れてしまったので、スクロールするときにオーバーレイが調整されず、ページをスクロールするだけでした。私の質問ではありませんでしたが、あなたは私が過去に把握できなかった問題を解決しました。ありがとう！ – Korgrue

オーバーレイdivは、スクロール時を含む親div全体を埋め込みます。

答えて

関連する問題