モバイルでの絶対的な変更を伴うCSS要素の位置

Question

私はいつも自分自身をCSSの絶対的な位置と混同していますが、問題はChromeを試していてFirefoxがうまくいきました。ブラウザーの画面サイズは応答する行為を見るが、モバイル上では同じ画面サイズであるため、私の絶対的な要素はいくつかのピクセルを上に動かす。事前に

#square-box-tratamiento-nebulizado { 
    height:20px; 
    width:100%; 
    text-align:-webkit-right; 
    z-index:1000; 
    /*margin-top:-63px;*/ 
    position:absolute; 
    bottom: 61px; 
    pointer-events: none; 
} 
/*etiqueta pulverizado*/ 
#square-box-tratamiento-pulverizado { 
    height:20px; 
    width:100%; 
    text-align:-webkit-right; 
    z-index:1000; 
    /*margin-top:-29px;*/ 
    position:absolute; 
     bottom: 26px; 
    pointer-events: none; 
} 

https://jsfiddle.net/x7b8hp9b/

おかげで、私たちは考え出し

Answer 1

OKとし、画像に表示されている場合、モバイルでnoデスクトップ版の一番下に表示されていることをスクロールバーがあります問題の原因となります。両方のラベルに、我々は、コンテナの上部に全体のdivを移動し、次のようにCSSを変更し、マージントップを置く：私はこのようにそれを固定

#square-box-tratamiento-nebulizado { 
    height: 20px; 
    width: 100%; 
    text-align: -webkit-right; 
    z-index: 1000; 
    margin-top: 427px; 
    position: absolute; 
    pointer-events: none; 

、我々は変化にマージントップのメディアクエリを置きますそれは画面のサイズが変更された場合