html - 导航栏下显示的图像

Question

我试图在我的垂直导航栏旁边放置一个图像，但它显示在它下面。

我是这样做的

    body
    {
        font-family: 'Open Sans', sans-serif;
        background-color: #333;
    }

    .element
    {
        display:inline-block;
        float:left;
    }

    #wrapper
    {
        position:absolute;
        height:100%;
        width:200px;
        bottom:0px;
        background-color:#0F4D92;
    }

    nav
    {
        top: 50%;
        margin-top: -75px;
        position: fixed;
    }

    ul
    {
        list-style-type: none;
        width: 200px;
        height: 40px;
    }

    <div class="element" id="wrapper">
        <nav>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="withdraw.php">Withdraw</a></li>
                <li><a href="deposit.php">Deposit</a></li>
            </ul>
        </nav>
    </div>

    <img class="element" src="../bg.jpg"/>

然而，这就是它的样子:

如您所见，图像位于导航栏后面。我不能只使用边距，因为我需要一个具有灰色空间大小的元素，这样我就可以在该空间的中心放置图像。那么我该如何解决这个问题呢？

Answer 1

根据您想要实现的目标，我冒昧地更改了您的标记并为您制作了一份工作副本。我认为没有你想做的那么复杂。我希望这能以某种方式有所帮助。

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'Open Sans', sans-serif;
  background-color: #333;
}
.element {
  position: relative;
  height: 100%;
  width: 100%;
  font-size: 0;
}
nav,
.imgWrapper {
  display: inline-block;
  height: 100%;
}
nav {
  width: 20%;
  background-color: #0F4D92;
  font-size: 1rem;
}
nav > * {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.imgWrapper {
  vertical-align: top;
  width: 80%;
}
.imgWrapper > img {
  width: 100%;
  height: 100%;
}
ul {
  list-style-type: none;
  width: 200px;
  height: 40px;
}

<div class="element">
  <nav>
    <ul>
      <li><a href="">Home</a>
      </li>
      <li><a href="withdraw.php">Withdraw</a>
      </li>
      <li><a href="deposit.php">Deposit</a>
      </li>
    </ul>
  </nav>
  <div class="imgWrapper">
    <img src="http://placehold.it/2000x2000" alt="" />
  </div>
</div>