レスポンシブウェブデザインでバックグラウンドの特定の点にdivを表示するには

私は反応の良いウェブサイトを作っており、バックグラウンドの特定の点にdivを表示したいと考えています。しかし、私はブラウザのサイズを変更すると、divはランダムな場所に移動します。 https://jsfiddle.net/gmr2583u/（フィドルで背景画像を添付できませんでした）背景画像： blue background with a gray stamp コードを強調します。レスポンシブウェブデザインでバックグラウンドの特定の点にdivを表示するには

<!DOCTYPE HTML> 
<html> 
<head> 
    <link href="jsfiddle.css" rel="stylesheet" type="text/css" /> 
    <style> 
     body{margin:0 auto;padding:0;font: 0.8em Arial,sans-serif;} 
     .jsfiddle { 
      float:left; 
      display:block; 
      background-image: url(Images/jsfiddle.jpg); 
      width:45%; 
      height:240px; 
      z-index:1; } 
     .con1{ 
      float:right; 
      padding:6% 2% 0 0;} 
     .con1 a{ 
      text-decoration:none; 
      font-weight:bold; 
      color:#1f5198; 
      padding-top:1%;} 
    </style> 
</head> 

<body> 
    <div class="jsfiddle"> 
     <div class="con1"><a href="#">Click here for <br> information on 
      <br> CEO<br> Conference <br> October 9-10 </a> 
     </div> 
    </div>      
</body> 
</html>

出典

2017-10-05 Jeremiah Jacob

あなたは要素の幅と高さを考慮して.con1位置パーセントのマイナスで.con1にposition:absoluteを使用して、要素をtranformする必要があります。また、position:relative;〜.jsfiddleを適用する必要があります。そのため、.con1は、その要素に対して相対的に位置が示されます。

body{ 
 
    margin:0 auto; 
 
    padding:0; 
 
    font: 0.8em Arial,sans-serif; 
 
} 
 

 
.jsfiddle { 
 
    position:relative; 
 
    float:left; 
 
    display:block; 
 
    background-size:cover; 
 
    background-position:center center; 
 
    background-image: url(http://www.placecage.com/c/460/300); 
 
    width:45%; 
 
    height:240px; 
 
    z-index:1; 
 
} 
 
.con1 { 
 
    position:absolute; 
 
    right:6%; 
 
    top:10%; 
 
    transform:translate(-10%, -2%); 
 
    background:#fff; 
 
} 
 
.con1 a{ 
 
    text-decoration:none; 
 
    font-weight:bold; 
 
    color:#1f5198; 
 
    padding-top:1%; 
 
}

<div class="jsfiddle"> 
 
    <div class="con1"><a href="#">Click here for <br> information on <br> CEO<br> Conference <br> October 9-10 </a> 
 
    </div> 
 
</div>

出典

2017-10-05 19:12:57 WizardCoder

あなたのコードを使用し、それは完全に働いた後、私はまだdivのテキストが正確にグレーのスタンプ内に存在し得ることができませんでしたが、divのためのバックグラウンドは灰色のスタンプを作りました。どうもありがとうございました！！ –

良い解決策。あなたがうまく働いてうれしい。 – WizardCoder

レスポンシブウェブデザインでバックグラウンドの特定の点にdivを表示するには

答えて

関連する問題