位置固定オーバーラップエラーを修正するにはどうすればよいですか？

Question

私の問題は、position fixedを使用してモバイルでは、goaloneimgにある最初のdivはgoalontextにある2番目のdivに落ちています。私はこのresponsiveerrorにおよそposition fixed

HTMLコードをどのように修正すればよい

<div class="goals"> 
 
      <div class="row"> 
 
       <div class="col-md-6"> 
 
        <div class="goalonetext"> 
 
         <h1>What our goals?</h1> 
 
         <hr align="right" /> 
 
         <p>Aliquam tempus lacinia quam sit amet</p> 
 
         <br/> 
 
         <p class="prightgoals">Aliquam tempus lacinia quam sit amet maximus. Donec tincidunt dui ut purus cursus lacinia.</p> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-6"> 
 
        <div class="goaloneimg"> 
 
        <img src="http://www.infolab.es/wp-content/uploads/2015/10/work-and-coffee.jpg" /> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div>

CSSコード

.goals{ 
margin: 50px 0px 0px 0px; 
} 

.goals > .row{ 
    height: 300px; 
} 

.goaloneimg img{ 
    width: 100%; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    height: 419px; 
} 

.goalonetext{ 
    background-color: #54b4e6; 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    color: #FFFFFF; 
    padding: 30px 30px 0px 30px; 
    height: 419px; 
    text-align: right; 
} 

Answer 1

あなたは一度位置属性を変更するには、メディアクエリを使用する必要があります。あなたは一定の幅になります。エラーが600PXで発生し始めた場合たとえば、あなたがメディアクエリで幅を調整することができます（このコードを追加する必要があります

@media (max-width: 600px) { 
    .goaloneimg img, .goalonetext { 
    position:initial; 
    } 
} 

ここで働いフィドルを参照してください。 https://jsfiddle.net/Nimral/uv8yrrav/9/