デベロッパーツールを開くときに要素移動を停止する方法

Question

これはしばらくの間私を悩ませていました。サイトを構築し、Z-インデックス値を持つさまざまな要素があるとします。使用しているブラウザに応じてデベロッパーツールやFirebugを開くと、ページ全体ではなく要素がシフトしているようです。

これはフラットなデザインよりも素材デザインが劣っているのでしょうか、それとも何か不足していますか？何かが正しくないように感じます。私は多くのサイトで同じ問題を見て、それを自分で見つけます。ちょうどその場で物事を保持するためにいくつかのCSSやjsのトリックが欠落している場合は、ちょうど不思議。

これは単なる垂直な問題なので、私はメディアのクエリがそれを解決するとは考えていません。私はまた、ページのボディを最小の高さの値に固定しようとしましたが、これもケースではありませんでした。これは、移動しているzインデックス値の項目だけです。

おそらく、影響を受ける個々の要素の最小高さを修正する必要がありますか？私はこれを実行する必要がある場合は、これは少し長いようだたび

は、この上の任意の情報を大幅に最初にピッチングのためのすべての感謝の

Answer 1

こんにちはみんなをいただければ幸いです。私はすべてのあなたの回答に感謝しますが、彼らは」didnの本当に私がしたいと思うように働いています。昨夜、私はいくつかの掘り出し物を見つけて、自分自身にこれを行うためのより良い方法がなければならないと考えました。

私は十分に説明していませんでしたが、私が実際にやろうとしていたのは、要素の背景画像にグラデーションを置き、同じ要素の：beforeセレクタを使い、Z-インデックス値を使用することでした。これは、グラデーションが十分な高さまたは伸張していないかのいずれかで、ビューポート上で変化するような、大変大きなボールを引き起こしました。

私の考えを元に戻って、私は自分自身を熟考し始めました。いくつかの掘削ブームの後！私は、同じ要素内で背景画像とグラデーション属性を実際に組み合わせることができたことを認識しました。問題は解決しました。ここで

は、クラスIのセットアップです：

.site-header { 
    min-height: 90vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    background: linear-gradient(to bottom right,#1d9bc8,#37e1d7, transparent), url("../img/herobg.jpg") no-repeat center; 
    background-size: cover; 
}