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

使用外部和内部元素。在我的代码中，我使用了一个flexbox来显示菜单和徽标。希望这会有所帮助。

.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容器中，然后使用锚标记来定位图像，这样整个徽标图像都是可点击的。 / p>

以下示例CSS

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

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

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

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

将绝对定位图像与固定div的底部对齐

2 个答案: