要素の位置を父の要素に固定する方法サイズの異なるブラウザが一致する場合

Stack Overflowで同じ質問を検索する方法がわかりません。だから、私はこの質問をする。要素の位置を父の要素に固定する方法サイズの異なるブラウザが一致する場合

2つのボタンposition: absolute;とその父の要素position: relative;を設定します。大きい場合クロームウィンドウ、それは美しいです。マウスを使用する場合、ウィンドウのサイズをより小さなサイズに変更します。ボタンの位置が間違っています。醜いです。以下の画像：

大きなウィンドウ：必要な位置に赤いボタンと緑色のボタンがあります。

小さなウィンドウ：赤いボタンと緑のボタンが間違った位置にあります。小さなウィンドウで

、中央の位置にある。（私は中央の位置に彼らのように見えた。）

私は同じ権利も一番上にそれらを必要としたいどのような二つのボタン青色要素内のパーセンタ位置。

私のコードは以下の通りです：

<style> 
     .content { 
      width: 100vw; 
     } 
     #fullpage .section img { 
      margin: 0 auto; 
      width: 1200px; 
      display: block; 
     } 
     .apple { 
      position: absolute; 
      right: 300px; 
      top: -560px; 
      width: 350px; 
      height: 90px; 
      background-color: red; 
     } 
     .apple:hover { 
      background: url("./img/Andriod-hover.png"); 
     } 
     .android { 
      position:relative; 
      right: 300px; 
      top: -660px; 
      width: 350px; 
      height: 90px; 
      background-color: green; 
     } 
     .android:hover { 
      background: url("./img/iphone-hover.png"); 
     } 
    </style> 
</head> 
<body> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.fullpage.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery.fullpage.css" /> 
<script> 
    $(document).ready(function() { 
    $('#fullpage').fullpage({ 
     sectionsColor : ['#58C0F2','#FBFFF1', '#FBFFF1'], 
    }); 
    }); 
</script> 
<div id="fullpage"> 
    <div class="section section1"> 
     <div class="content"> 
      <img src="" alt=""> 
       <div class="apple"></div> 
       <div class="android"></div> 
     </div> 
    </div> 
</div> 
</body>

は、青色の父要素に2つのボタンがiOSとAndroidダウンロードボタンで、あなたに真実を伝えるために。私はさまざまなサイズのブラウザーに一致する必要があります。

=============

私は私の説明が十分ではありません、ごめんなさい。私は以下の実際の画像に追加します。

右の位置：

小さなサイズと誤った位置：

出典

2017-10-25 jiexishede

-1

確かに、私はこの答えは正しくない可能性がまだプログラミングの比較的新しいんだけど、あなたはブートストラップを持っていますか？もしそうなら、あなたは親要素に "container-fluid"クラスを適用することができ、それはそれらを見ているスクリーンのサイズに従ってそれらのサイズを調整することができるはずです。

私が間違っている場合、またはより良い解決策がある場合は私を修正してください。でも

出典

2017-10-25 07:12:09

あなたはブラウザのサイズが変更したときにボタンを移動したくないことを意味している場合、これは右側に常にボタンを配置します。この

body { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-color: pink; 
 
    position: relative; 
 
} 
 

 
.btnHolder { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 80%; 
 
    transform: translate(-80%, -50%); 
 
} 
 

 
.btnHolder button { 
 
    display: block; 
 
}

<div class="btnHolder"> 
 
    <button>Button 1</button> 
 
    <button>Button 2</button> 
 
</div>

を試してみてください、サイズ変更しながら

サイズ変更時に移動することなく最小限の位置を提供できるようにコードを使用しませんでした。使用したCSSを使用し、それに応じて値を調整し、ピクセルは使用しませんそれは移動しません。

出典

2017-10-25 07:18:03 Swellar

私は記述の意志で画像に追加します。ごめんなさい。私はあなたの時間を失った。私はピクセル単位を使用する必要がある場合。何か考えていますか？ – jiexishede

それは本当に絶対に配置する必要がありますか？私が画像で見ることができるので、3つのインラインdivがそれを行い、ボタンが他の要素と重なり合わないようにします – Swellar

body要素の中央の下点に '.btnHolder'位置を設定し、ボタンの位置を'position：absolute、top：-200px'です。 – jiexishede

要素の位置を父の要素に固定する方法サイズの異なるブラウザが一致する場合

答えて

関連する問題