导航没有放置在容器内，在图像的顶部？如何到那？答案

【问题标题】：The nav is not placed whitin the container, on top of the image? How to get there?导航没有放置在容器内，在图像的顶部？如何到那？
【发布时间】：2015-01-21 17:09:21
【问题描述】：

如何在正确的位置获取容器中的导航（在背景照片的顶部）？现在在左下角外面... 我将导航定位在正确的位置，但它不能与容器中的图像一起使用。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>goodidea</title>
<link href="index.css" rel="stylesheet" type="text/css" />

<style type="text/css">
 img.c1 {width:1024px;height:1500px}
</style>

</head>
<body>
<div id="container"><img src="images/photo-1.jpg" class="c1"/></div>
<ul id="nav">
<li><a href="#">photo-2</a></li>
<li><a href="#">photo-3</a></li>
<li><a href="#">photo-4<3/a></li>
<li><a href="#">photo-5</a></li>
</ul>
</body>
</html>


* {
    padding: 0;
    margin:0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 130%;
}

#container {
    width: 1080px;
    height: 2000px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto;
}

#nav { 
    list-style-type: none;
    padding-top: 170px!important; 
    padding-bottom: 13px; 
}

#nav a:link, #nav a:visited { 
    color: #000000; 
    padding-top: 13px; 
    padding-bottom: 13px; 
    text-decoration: none; 
} 

#nav a:hover, #nav a:active { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    color: #d2d2d2; 
    text-decoration: none; 
}

感谢您的提示/帮助

【问题讨论】：

提示：容器中有一个图像，而不是背景图像。
提示 #2：您的 nav 位于标记中的容器之外？
请详细说明您要在此处实现的目标，因为它的方式尚不清楚。

标签： css containers nav

【解决方案1】：

希望这是您所期望的。但正如@MelanciaUK 评论的那样，你不应该使用容器类之外的链接。

http://plnkr.co/edit/XSDrVmNmwsM2novVgm4T?p=preview

<div class='imagediv'>
  <img src="http://dummyimage.com/500x800/f5f0f5/d6d7e8.jpg" class="c1"/>
</div>
<ul id="nav" class='navlinks'>
  <li><a href="#">photo-2</a></li>
  <li><a href="#">photo-3</a></li>
  <li><a href="#">photo-4<3/a></li>
  <li><a href="#">photo-5</a></li>
</ul>

【讨论】：

确实，我打算用图像填充容器。对于每一页，我都喜欢使用不同的照片。
设置 Rajeshwar 是目标 :) 导航现在位于图像下方，页面未居中。我正在努力。
Rajeshwar，非常感谢！我是新手，但在你的帮助下，它成功了。
一件小事，在这个解决方案中，网站不会在屏幕中居中。我浏览了该网站并尝试了几个选项，但我没有找到诀窍？
定位是基于绝对和相对的。希望这可以帮助你。 stackoverflow.com/questions/4457790/…