絶対配置された画像を固定小分けの一番下に揃えます

Question

ブランドロゴをナビゲーションの一番下に固定するサイドバーナビゲーションがあります。

私がposition: absoluteとbottom: 0を試してみると、画像はページの下部にあり、divの下部にはありません。

私はposition: relativeを親divに設定することでこの問題を解決できますが、ナビゲーションは修正する必要があります。

誰かが私にこれを手伝ってくれることを願っています。

.logo-bottom { 
 
    width: 75%; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin-left: 40px; 
 
} 
 

 
.menu { 
 
    background-color: #fff; 
 
    width: 15%; 
 
    position: fixed; 
 
    float: left; 
 
    min-height: 100vh; 
 
    left: 2.5%; 
 
    opacity: 0.9; 
 
    text-transform: uppercase; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li>List item</li> 
 
    <li>List item</li> 
 
    <li>List item</li> 
 
    <li>List item</li> 
 
    <li>List item</li> 
 
    </ul> 
 
    <a href="products"> 
 
    <img src="logo.png" class="logo-bottom" /> 
 
    </a> 
 
</div>

Answer 1

外側および内側要素を使用。私のコードでは、メニューとロゴを表示するためにフレックスボックスを使用しました。お役に立てれば。

.nav-container { 
 
    width: 100%; 
 
    height: auto; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
ul { 
 
list-style: none; 
 
margin: 0; 
 
padding: 1em 0; 
 
display: flex; 
 
} 
 
li.logo { 
 
align-self: flex-end; 
 
} 
 
li:not([class="logo"]) { 
 
padding: 0 1em; 
 
}

<div class="nav-container"> 
 
    <nav> 
 
    <ul> 
 
     <li class="logo"><img src="http://via.placeholder.com/200x50" alt=""></li> 
 
     <li>Menu option 1</li> 
 
     <li>Menu option 2</li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p> 
 
<p>...</p>

Answer 2

すべてのあなたの既存のコードはほぼ同じままにしたいと仮定すると、あなたは単に相対的な位置でのdivコンテナにメニューをラップして、画像を配置するためにあなたのアンカータグを使用することができ、このようにして、ロゴ画像全体をクリック可能にする。

a { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

.logo-bottom { 
    display: block; 
    width: 100%; 
} 

.menu-wrap { 
    position: relative; 
    display: block; 
} 

jsfiddle以下

例CSS：https://jsfiddle.net/xfbfezqp/1/