Позиционирование изображения и текста

Question

Как бы вы располагали позицию изображения в верхней части этой страницы так же, как текст в этом примере, но текст расположен в нижней части экрана пользователя. Также, когда они прокручиваются, оба должны быть зафиксированы так, чтобы они никогда не исчезали вроде как фиксированный заголовок.

Это очень простой и простой codepen.

HTML:

<div> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="60px" /> 
    <ul> 
     <li>Overview</li> 
     <li>About</li> 
    </ul> 
</div> 

CSS:

div { 
    border: 1px solid green; 
    float: left; 
    position: fixed; 
} 


img { 
    border: 1px solid red; 
    display: block; 
    float: right; 

}

ul { 
    border: 1px solid blue; 
    display: block; 
    text-align: right; 
} 

Answer 1

Вам нужно добавить position: fixed; и bottom: 0; к вашему ul элементу.

Answer 2

Этого фрагмент коды может помочь вам: HTML:

<div class="header"> 
    <span class="block"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" width="60px" /> 
    <br/> 
     </span> 
     <span class="block"> 
      <ul> 
      <li>Overview</li> 
      <li>About</li> 
     </ul> 
      </span> 

</div> 

CSS:

div.header { 
    border: 0px solid green; 
    float: left; 
    position: fixed; 
} 
div.header.img { 
    border: 5px solid green; 
    float: left; 
    position: fixed; 
} 

div.header.ul { 
    bottom: 10%; 
    /*position: fixed;*/ 
    border: 1px solid blue; 
    display: block; 
    text-align: right; 
} 

span.block { 
    display:block; 
}