Позиция: Исправлено Div Обложки изображений

Question

Итак, я пытаюсь сделать изображение застрявшим в нижней части страницы с фиксированной позицией (вроде как панель навигации). Проблема в том, что у меня есть текст где-то в центре страницы, и когда я увеличиваю масштаб, это изображение покрывает часть текста, и его невозможно увидеть.

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> 

Answer 1

Попробуйте этот код работает для меня

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> 

Answer 2

Я использовал margin-bottom: 100px;, и это сработало!