画像とテキストの位置付け

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要素にposition: fixed;とbottom: 0;を追加する必要が

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

Answer 1

。

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; 
}