响应重叠的问题

Question

我有以下问题..

我正在尝试在我的标题中放置图像。但是，每当我尝试从手持设备（例如手机）查看网站时，我放置的图像与我的徽标重叠......

 <style>
        #babypic{              
         position: absolute;
         max-width: 200px;
         height: auto;
         left: 0;
         top: 111px; 
        }                
      </style>
     <div id="babypic">
      <img src={{ 'baby2.png' | asset_url }}>
      </div>

以下屏幕截图可能会帮助您更好地了解我的问题：

正如你在第一张照片中看到的那样，宝宝处于完美位置。但是，当我试图缩小窗口或从手机访问网站时，宝宝与徽标重叠，如第二张图所示。

Answer 1

你应该调整婴儿照片的大小或增加标题高度并改变风格#babypic {
         位置：绝对;          最大宽度：200px;          身高：自动;          左：0;          底部：0px;         }

如果婴儿照片在底部。