html - 使用 CSS 将 div 定位在导航顶部

Question

我在尝试将 Logo 放置在导航栏前面/顶部(带有下 zipper 接)时遇到问题。我当前的 CSS 和 HTML 在下面，但是我愿意接受其他建议，并且感谢所有帮助。我希望 Logo 出现在导航栏的最右侧:

我想让导航栏向上移动，使其位于占位符 Logo 的中间位置。不幸的是，我不擅长使用 position: 或 top: 和 bottom:

CSS:

.logo
{
position:relative;
z-index: 2;
width: 100%;
height:200px;
text-align:right;
}

#nav
{
z-index: 1;
border:0;
background-color:#FFEE00;
list-style:none;
padding-right: 300px; /* the width of the logo, so logo doesn't obscure text on smaller screens/re-sized windows */
text-align:left;
font-family:Inky,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:18px;
}

#nav li
{
position:relative;
display:inline;
}

#nav a
{
display:inline-block;
padding:10px;
}

#nav ul
{
position:absolute;
left:-9999px;
margin:0;
padding:0;
text-align:left;
}

#nav ul li
{
display:block;
background-color:#fff;
}

#nav li:hover ul
{
left:0;
}

#nav li:hover a
{
text-decoration:underline;
background:#FFEE00;
}

#nav li:hover ul a
{
text-decoration:none;
background:none;
}

#nav li:hover ul a:hover
{
text-decoration:underline;
background:#f1f1f1;
}

#nav ul a
{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}

#nav a
{
color:#000;
text-decoration:none;
font-weight:lighter;
}

#nav a:hover
{
text-decoration:underline;
background:#f1f1f1;
}

HTML:

<div class="logo">
        <img src="http://placehold.it/300x200" alt="logo" height="200" width="300">
        </div>


        <ul id="nav">
            <li><a href="/">HOME</a></li>
            <li>
                <a href="#">CLUBS ></a>
                <ul>
                    <li><a href="#">Coming soon!</a></li>                       
                </ul>
            </li>
            <li>
                <a href="#">SHOWS ></a>
                <ul>
                    <li><a href="#">Coming soon!</a></li>
                </ul>
            </li>
            <li>
                <a href="#">WORKSHOPS ></a>
                <ul>
                    <li><a href="#">Coming soon!</a></li>
                </ul>
            </li>
            <li>
                <a href="#">KIDS ></a>
                <ul>
                    <li><a href="#">Coming soon!</a></li>
                </ul>
            </li>
            <li>
                <a href="#">TESTIMONIALS</a>
            </li>                               
            <li>
                <a href="#">NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT US ></a>
            </li>
        </ul>

非常感谢。

Answer 1

根据我使用 margin 的经验，通常可以解决问题

 .logo
 {
 position:relative;
 z-index: 2;
 width: 100%;
 height:200px;
 text-align:right;
 margin-right: 0;
 margin-left: auto;
 margin-bottom: -140px; //Tho i would fine tune this if i were you

 //Or if you wish margin: 0px 0px -140px auto (margin: top right bottom left)
 }