如何将导航栏向上移动到徽标下方，并使其停留在徽标下方？

Question

我目前正在创建一个仅与CSS和HTML混淆的网站，但是，我的导航栏遇到了问题。 我创建了它，但是，当我将徽标放在页面顶部，导航栏上方时，导航栏向下移动到页面中间，而我不确定如何移动它在徽标下方。 从我的记忆中可以看出，当我放置另一张图像时，这种情况并没有发生，但是即使移动了该图像，导航栏也没有移回到原始位置。 我尝试将其位置设置为固定，但将其移至屏幕的左侧。

而且，我该如何在不破坏导航栏的情况下在网站内移动第二个图像？

这是我的CSS：

#image1 {
display: block;
margin-left: auto;
margin-right: auto;
height: 8%;
width: 30%;
}

#image2 {
position: relative;
width: 20%;
top: 400px;
right: 481px;

}
ul {
list-style-type:none;
width:60%;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(163,21,23,1.00)
}

li {
float: right;
width: 33.33%;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: thin;
border-style: groove;
}

li a:hover {
background-color: #111;
}

body {
background-color: rgba(96,96,96,1.00)
}

这是我的HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>    LoL    </title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>  
<img src="assets/lol.png" alt="Logo" id="image1">
<img src="assets/minions.png" alt="Minions in LoL" id="image2" >

<ul>
<li><a class="active" href="#Home">Home</a></li>
<li><a href="#Farming">Farming</a></li>
<li><a href="#Best champions for each role">Best champions for each role</a>
</li>
</ul>
<banner></banner>
</body>
</html>

Answer 1

在图像1的CSS中，将高度从百分比更改为像素。 （说150像素）

Image1 { height: 150px; }

然后使用您的ul元素尝试

Ul {
Top: 150px;
Display: Fixed;
}

那应该在徽标下方的导航栏上！

使用浏览器中的开发工具查看发生了什么。 IE边缘迫使其向下移动。在chrome上，您可以右键单击并“检查元素”。

如何将导航栏向上移动到徽标下方，并使其停留在徽标下方？

问题描述

1 个解决方案

解决方案1
0 2017-11-12 13:50:30

如何将导航栏向上移动到徽标下方，并使其停留在徽标下方？

问题描述

1 个解决方案

解决方案1 0 2017-11-12 13:50:30

解决方案1
0 2017-11-12 13:50:30