ウィンドウのサイズを変更すると、イメージがHTML-CSSを使用して移動するのを防ぐにはどうすればいいですか？

私は私のウィンドウのサイズを変更すると画像が動かないようにするにはどうすればいいですか？ウィンドウのサイズを変更すると、イメージがHTML-CSSを使用して移動するのを防ぐにはどうすればいいですか？

私は私の画像のmoove、私の画像のxとyの位置は同じですが、ウィンドウが小さいので、このウィンドウに相対的な座標は私のイメージが希望の場所にないようにします。

私は既に "px"の代わりに "％"の両方の位置を使用するソリューションを探しますが、 "position：relative;"も使用します。残念ながら、私の場合、私はこの「ポジション：相対」を置くことはできません。私の写真をオーバーレイするために、私はセットの "位置：絶対;

ここに私のhtmlコード：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="menuStyle.css" /> 
    <title>Antoine</title> 
</head> 
<body> 
    <div id="bloc_page"> 
     <div> 
      <img src="schema.png"> 
      <img class="top" src="Linkedin.png" width="30" height="30"> 
     </div> 
    </div> 
</body> 
</html>

ここに私のCSSコード：あなたは助けるために

#bloc_page 
{ 
width: 1097px; 
margin: auto; 
} 

body 
{ 
background-color: black; /* Le fond de la page sera noir */ 
} 

.top { 
    position: absolute; 
    z-index: 1; 
    bottom:10%; 
    left: 80%; 
    }

は、事前にありがとうございます。

出典

2016-05-26 millet antoine

のための位置を追加する必要があります。 –

ありがとうございました！それは私の目のすぐ下にあったが、私はそれを見なかった。 –

ちょうどあなたは、あなたが "#bloc_page" IDの相対位置を使用することができます "#bloc_page" ID

#bloc_page { 
    position: relative; 
    width: 1097px; 
    margin: auto; 
}

出典

2016-05-26 12:08:10

あまりにも、ありがとう！ –

このようなソリューションをお探しですか？

.top { 
    position: fixed; 
    z-index: 1; 
    bottom: 10%; 
    left: 80%; 
    max-width: 300px; 
    max-height: 300px; 
}

この答えはその後、もう少し詳細に問題を説明してくださいした後、あなたが何であったかではない場合

...

出典

2016-05-26 11:49:50

投稿を変更しました。 –

ID「bloc_page」を使用してのdivコンテナがの静的な幅を持っているので、これは、起こり1097ピクセルあなたはこのような何かにそれを設定した場合：

 #bloc_page { 
 
     width: 80%; 
 
     margin: auto; 
 
    } 
 

 
    body { 
 
     background-color: black; 
 
    } 
 

 
    .top { 
 
     position: absolute; 
 
     z-index: 1; 
 
     bottom:10%; 
 
     left: 80%; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <link rel="stylesheet" href="menuStyle.css" /> 
 
    <title>Antoine</title> 
 
</head> 
 
<body> 
 
    <div id="bloc_page"> 
 
     <div> 
 
      <img src="schema.png" /> 
 
      <img class="top" src="Linkedin.png" width="30" height="30" /> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

それは、ブラウザのサイズに比べて移動します。

出典

2016-05-26 12:00:49

ありがとうございますそれは完全に動作します。 –

ウィンドウのサイズを変更すると、イメージがHTML-CSSを使用して移動するのを防ぐにはどうすればいいですか？

答えて

関連する問題