固定位置的div遮盖图像问题

Question

所以，我正在尝试使用position:fixed（类似导航栏）将图像固定在页面底部。问题在于，我在页面中央有一些文本，当我缩放时，这个图像会遮挡一些文本，导致无法看到。

CSS：

.bottom {
    display: block;
    position:fixed;
    width:100%;
    height: 70px;
    bottom: 0px;
}

p.BrunchENG_TXT{
    padding-top: 20px;
    text-align: justify;
    margin: 0 auto;
    width: 60%;
    color:#7b0d4c;
    font-family:"Verdana";
}

HTML:

<div>
 <p class="BrunchENG_TXT"> 
  <b>Brunch</b> 
  </br>
  The weekends are holydays, giving us the chance to share special moments with the people we love the most….We welcome everybody each Sunday starting 11 o’clock so that all of you can enjoy fully this precious time and recharge with healthy food and energy for the day….Welcome to the Sunday Bruch @ Mumbai Burgas - the menus are composed with special attention to the children and the vegetarians and are published well in advance on our FB page.
 </p> 

 <div>
  <img src="images/repetB.jpg" class="bottom">
 </div>
</div>

- Valio Raltchev

---

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、具体问题或错误以及重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建一个最小、完整和可验证的示例。 - Marcos Pérez Gude

这里有所有的代码，只有文本和图像，没有什么特别的，我希望固定的图像不要覆盖文本。 - Valio Raltchev

@KpTheConstructor 它是 position:fixed 的，应该这样吗？ - Valio Raltchev

固定位置的元素会使它们脱离文档流。你的文本和图像不知道它们各自存在于什么空间中。最好的方法是在文本底部填充足够的边距，以便将文档向下推动足够远，以便为图像留出空间显示。 - Lewis

谢谢 @Lewis，它很有效！ - Valio Raltchev

Answer 1

我使用了 margin-bottom: 100px;，它起作用了！

- Valio Raltchev

---

如果你调整窗口大小，它是否能够正常工作？同时也要考虑更大/更小的屏幕和移动设备 :) - Lionel Renaux

它与我的代码很匹配，目前我没有发现任何问题，所以是的，它对我有效 :) - Valio Raltchev

Answer 2

尝试这段代码，它对我有效

CSS：

 .bottom {
 display: block;
 position:fixed;
 width:100%;
 height: 70px;
 bottom: 0px;
 }

  p.BrunchENG_TXT{
  padding-top: 20px;
  text-align: justify;
  margin: 0 auto;
  width: 60%;
  color:#7b0d4c;
  font-family:"Verdana";
  }

  #img-footer{
    height: 100px; /* change 100px by height of the picture "repetB.jpg"*/
  }

HTML：

<div>
 <p class="BrunchENG_TXT"> <b>Brunch</b> </br>
 The weekends are holydays, giving us the chance to share special moments with the people we love the most….We welcome everybody each Sunday starting 11 o’clock so that all of you can enjoy fully this precious time and recharge with healthy food and energy for the day….Welcome to the Sunday Bruch @ Mumbai Burgas - the menus are composed with special attention to the children and the vegetarians and are published well in advance on our FB page.
 </p> 

<div id="img-footer">
<img src="images/repetB.jpg" class="bottom">
</div>
</div>

- user3062282