Проблемы с форматированием нижнего колонтитула

Question

Я пытаюсь создать нижний колонтитул на моей домашней странице с изображением, которое занимает 100% ширины. Затем я также хочу, чтобы изображение LinkedIn было связано с моей учетной записью LinkedIn в центре этого нижнего колонтитула. Как мне получить LinkedIn lo go и изображение нижнего колонтитула, чтобы они оставались в одинаковых положениях и изменяли размер вместе, когда я настраивал размер окна браузера? И есть ли способ заставить мой нижний колонтитул плавать в нижней части страницы, чтобы при настройке размера браузера он всегда оставался приклеенным к нижней части? Вот что я написал до сих пор:

<footer>
    <img src="images/IMG_7745 (1).jpeg" alt="photography" id="tree_photo"><a href="linkedin.com/in/coby-labella"><img src="images/linkedinlogo.png" id="linkedin_logo" alt="logo"></a>
</footer>


#tree_photo{
    width: 101%;
    opacity: 40%;
    margin-top: 1%;
    margin-left: -1%;
    margin-bottom: -1%;
    display: inline;
    positon: fixed;
    bottom: 0
}

#linkedin_logo{
    display: inline;
    position: absolute;
    right: 42%;
    bottom: -23.5%;
    opacity: 80%;   
}

Answer 1

Если я понял, что вы хотите сделать, есть css:

footer {
    overflow:hidden;
    position:fixed;
    width:100%;
    left:0;
    right:0;
}
#tree_photo{
    width: 101%;
    opacity: 40%;
    margin-top: 1%;
    margin-left: -1%;
    margin-bottom: -1%;
    display: inline;
    position: absolute;
    bottom: 0;
}

#linkedin_logo{
    display: inline;
    position: absolute;
    right: 42%;
    bottom: 0;
    opacity: 80%;   
}

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

Надеюсь, это поможет