了在基礎

Question

嗨一個像我有以下基礎codepen疊加文本

$(document).ready(function() { 
    $(document).foundation(); 
}); 

body { 
    background-color: #a3d5d3; 
} 

#wrap { 
    position:relative; /* make this relative to have the inner div absolute without  breaking out */ 
/* width: 200px; /* fix the width or else it'll be the entire page's width */ 
    background: silver; 
    border: 1px solid grey 
} 

#text { 
     color:#ffffff; 
     margin-left: 70%; 
    position: absolute; 
     width:250px; 
     height:60%; 
    top: 0; 
    bottom: 0; 
    background: black; 
    opacity:0.5; 
     padding :20px; 
} 

<div class="row fullWidth"> 
     <div class="large-12 columns"> 
      <div id="wrap"> 
             <div id="text"> 
              <br /><br /><br /><br /> 
              <h3>MCA Coding and MLC Compliance</h3> 
              <p> 
               This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. This is some text which I need to show on the right hand side. 

              </p> 
             </div> 
<img src="https://www.burgessyachts.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/0/00006250_13.jpg" /> 
      </div> 
     </div> 
</div> 

在大屏幕上它工作正常 - 我想誇大文在右邊的圖像 - 但如果你縮小屏幕的文字開始消失的權利 - 任何想法如何保持它在所有屏幕上保持一致??? 謝謝

Answer 1

最好使用left：position而不是margin來定位。您可能還想刪除height屬性，以便容納更多內容。

#text { 
    padding-top: 2em; /*replaces the <br>s in your html*/ 
    color: #ffffff; 
    position: absolute; 
    width: 250px; 
    /*height: 60%;*/ 
    top: 0; 
    right:7.5%; /* instead of margin*/ 
    background: black; 
    opacity: 0.5; 
    padding: 20px; 
} 

我做了一個演示codepen： https://codepen.io/kemie/pen/pPoqOv