Question

我需要帮助才能将导航链接放在我的容器后面。一旦我这样做，那么我可以得到一个跳转影响我的链接和添加图像。我希望它看起来像一个文件夹，当你将鼠标悬停在链接上时，看起来每个链接都会跳转到一个新文件夹。出于某种原因，当我输入代码使链接跳转它将链接推入我的container.i需要它只是在容器下面一点点后面得到那个外观。你可以帮忙吗。

BODY {
overflow:hidden;
      margin: 150px; 
      padding: 0; 
      background: url ();
      color: #404040; 
      font: normal 12px arial;}


#header {
      margin:35px auto;
      width: 800px;
      height: auto;
      padding: 10px 0px 0px 0px;
      background: #900}



A.main:link, A.main:active, A.main:visited
       {
       margin-bottom: 0px; 
       padding: 5px 20px 20px 10px;
       margin: 0px 2px 0px 2px;
       background: url('file:///C|/Users/JESS/Desktop/none');
       border:double;
       float:left;
       margin: 25px;}

A.main:hover  
     {color: #303030;
      border: double;
      margin:4px;}

#container {
     margin: 0px auto;
     padding-left:15px;
     width: 800px;
     height: auto;
     background: #000;
     border-style:double;
     box-shadow: 15px 15px 5px #333;
     -moz-box-shadow: 10px 10px 5px #333;
     -webkit-box-shadow: 10px 10px 5px #333;} 

#content {
     float: none;
     width: 800px;
     padding: 0px 0px 100px 0px;
     height: auto;
     text-align: justify;
     overflow: auto;}

<div id="header">
      <center>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      <a href="file:///C|/Users/JESS/Desktop/URL" class="main">LINK</a>
      </center>
</div>



<div id="container">



<div id="content">

Answer 1

您是否尝试在z-index和position上添加#header和#container？

#header {
  margin:35px auto;
  width: 800px;
  height: auto;
  padding: 10px 0px 0px 0px;
  background: #900;
  position: relative;
  z-index: -10;
}


#container {
  margin: 0px auto;
  padding-left:15px;
  width: 800px;
  height: auto;
  background: #000;
  border-style:double;
  z-index: 5;
  box-shadow: 15px 15px 5px #333;
  -moz-box-shadow: 10px 10px 5px #333;
  -webkit-box-shadow: 10px 10px 5px #333;
}

Answer 2

设置z-index要求您设置position - 尽管该值可以是相对值，绝对值或固定值。为了让它以我认为你所描述的方式“跳跃”，你可以把边缘搞得一团糟，就像这样：

A.main:link, A.main:active, A.main:visited {
       z-index: 5;
       position: relative;
       margin-bottom: 0px;
       padding: 50px;
       padding-top: 0px;
       border:double;
       float:left;
       margin: 10px;}

A.main:hover {
      color: #303030;
      border: double;
      margin:10px;
      margin-top:0px;
      margin-bottom:20px;}

#container {
     margin: 0px auto;
     padding-left:15px;
     width: 800px;
     height: auto;
     background: #000;
     border-style:double;
     position:relative;
     box-shadow: 15px 15px 5px #333;
     -moz-box-shadow: 10px 10px 5px #333;
     -webkit-box-shadow: 10px 10px 5px #333;}

我需要我的链接去容器后面

2 个答案: