调整大小时图像r1会移动

Question

我需要做一个位置:绝对在我的r1类上rose.The问题是它在我调整browser.No大小时移动位置包括图片在内的其他元素这样做，直到我尝试使用位置:绝对元素。我知道还有其他方法可以做到这一点，但我真的需要学习如何在一个响应式的design.My网站中使用它是www.michaelmorris.website.The的方式，我想设置样式这是左侧的垂直链接，两朵玫瑰垂直堆叠在右侧的links.One大保存日期图像在中间居中，两个垂直堆叠的玫瑰图像在右侧。我确实有之前尝试使用位置:绝对的截图，我能够实现这个设计，但问题是它没有响应。将发布的代码，但我突出显示所有的东西，并使用控制K，它仍然不允许我发布。我也用了Chrome的

         beautify and it still will not allow me to post.

<div id="MasterContainer">
        <section>
         <ul id="tes">
        <li class="l"><a href="index.html">Home</a></li>
    <li class="l"><a href="gallery.html">Gallery</a></li>
    <li class"l"><a href="MessageBoard.php">Messages</a></li>
    <li class"l"><a href="About.html">About Us</a></li>
    <li class="r1"><img src="http://michaelmorris.website/Images/Roses.jpg"> `enter code here`</li>  
<section>


img{
    max-width: 100%;
    }
    #tes{
    margin: 0;
      padding: 0;
      list-style: none;hnnbvcxzbc
    border: 5px solid #eee8aa; 
    }
    li a{
    color: #FFFFFF;
     font-size:1.82em;
        font-style:italic;
        list-style: none;
    }
    #MasterContainer{
        width: 100%;
      margin: 0%;
      padding: 0 5%;
        }
    .r1{    
          width: 10%;
       position: absolute;
       top: 10%;
       left: 10%;
      float: left;
    }

Answer 1

您的r1类立即将其宽度、顶部和左侧设置为其父容器的10%……所以当你调整浏览器的大小时，10%的比例当然会改变…您应该使用像素而不是百分比。请参阅http://www.w3schools.com/css/css_positioning.asp