Позиционирование контрола на странице.
 

Подскажите как правильно позиционировать контрол, чтобы он при изменении размеров окна браузера не пропадал из окна. Я делаю так: - в файле html контрола такой

<figure>
    <figcaption>Включить музыку</figcaption>
    <audio
        controls
src="./1.mp3"      
src="./1.ogg">
            <code>audio</code> element.
    </audio>
</figure>

- в файле css

figure {
position: fixed; 
top: 500px; 
left: 30px; 
padding: 20px;	 
font-size: 20px;
color: OrangeRed;
}

В таком случае при изменении окна браузера по горизонтали всё нормально, а при изменении по вертикале контрол уходит за пределы окна. Возможно ли это как-то исправить, или вариантов нет?
Файл во вложении.
Всем спасибо.

III,
задайте top в процентах.

Сделал так

figure {
position: fixed;
top: 80%; 
left: 30px; 
padding: 20px;	 
font-size: 20px;
color: OrangeRed;
}

, но при сворачивании окна по вертикали примерно на 50% контрол опять пропадает.
Желательно как-то привязать контрол к нижней границе окна браузера.

Короче сделал так

figure {
width: 100%;
position: fixed;
bottom: 0;	 
font-size: 20px;
color: OrangeRed;
}

и вроде бы всё пашет как надо.
Всем спасибо.