爲什麼我的圖像浮動在我的下拉菜單上

Question

我想弄清楚爲什麼我的標題爲「玩家」的下拉導航欄在我的圖像後面。我嘗試將「頂級」類的z-index設置爲=「2」，並將圖像元素設置爲=「1」，但這不起作用。

是否涉及絕對定位？爲什麼我的下拉菜單不能在上面浮動？

function slow(){ 
 
    document.getElementsByClassName("tracy")[0] 
 
    .style.opacity = 0; 
 
    var tracy1 = document.createElement("img"); 
 
    tracy1.src = "https://cdn5.kicksonfire.com/wp-content/uploads/2015/08/TRACY-MCGRADY-WAS-IN-CHINA-TO-RE-LAUNCH-THE-ADIDAS-T-MAC-5-4.jpg?x77385"; 
 
    tracy1.style.width = "175px"; 
 
    tracy1.style.height = "220px"; 
 
    tracy1.style.opacity = 0; 
 
    tracy1.style.float = "left"; 
 
    tracy1.style.marginLeft = "10px"; 
 
    tracy1.className = "fade-img"; 
 
    document.getElementsByClassName("img-container")[0] 
 
    .appendChild(tracy1); 
 
    setTimeout(function(){tracy1.style.opacity = 1;},0); 
 
};

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
} 
 

 
header, nav, section, aside, footer, article { 
 
    display: block; 
 
} 
 

 
body {background-image: url(backwood.png);} 
 

 
.container { 
 
    margin:0 auto; 
 
    background-color: #f7f7f7; 
 
    background-size: cover; 
 
    width: 1300px; 
 
    padding-top:5px; 
 
    height: 100%; 
 
} 
 

 
header { 
 
    margin:0 0 2px; 
 
    border-bottom: 2px groove #ffae00; 
 
} 
 

 
header h1 { 
 
    text-align: center; 
 
    padding-top: 20px; 
 
    padding-bottom: 25px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    color: #f4ca1f; 
 
    background:linear-gradient(to right, #5092f4, #f29641); 
 
} 
 

 
.nba {margin-right: 10px;} 
 

 
.thenav { 
 
    background-color: #3b63d3; 
 
    height: 85px; 
 
    opacity: 0.9; 
 
    position: relative; 
 
    border-bottom-radius: 5px; 
 
} 
 

 
.logo {float: left;} 
 
.top { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.top ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.top ul li { 
 
    float: left; 
 
    background-color: #3b63d3; 
 
    width: 90px; 
 
    text-align: center; 
 
    border-right: 1px groove #141e38; 
 
    position: relative; 
 
} 
 

 
.top ul li a { 
 
    display: block; 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 33px 10px; 
 
} 
 

 
.top ul li a:hover { 
 
    background-color: #47e586; 
 
    -webkit-transition: all 0.90s; 
 
    -moz-transition: all 0.90s; 
 
    transition: all 0.90s; 
 
} 
 

 
.top li ul li a { 
 
    padding: 8px; 
 
    text-align:center; 
 
} 
 

 
.top li ul li{ 
 
    background-color: #6db8f2; 
 
    border: 4px groove grey; 
 
    border-radius: 4px; 
 
    opacity: 1; 
 
    background-color:#f76778; 
 
    position: relative; 
 
} 
 
.top li ul li{background-color:#f76778;} 
 
.top li ul li:nth-child(1) a:hover {background-color: blue;} 
 
.top li ul li a:hover{background-color: red;} 
 

 
.top ul li ul {display: none;} 
 
.top li:hover ul{position:absolute;} 
 
.top li:hover ul{display: block;} 
 

 

 
.userlogin { 
 
    font-size: 12px; 
 
    position: absolute; 
 
    top:2px; 
 
    left: 1330px; 
 
    color: white; 
 
} 
 

 
input[type=text], input[type=password] { 
 
    font-weight: bold; 
 
    margin: 0; 
 
    font-size: 8px; 
 
    height: 10px; 
 
    padding: 3px 5px; 
 
    color: 162354; 
 
} 
 
\t 
 
.stat input[type=button] { 
 
    background-color: #6cd171; 
 
    color: blue; 
 
    border-radius: 6px; 
 
    font-weight: bold; 
 
    border: none; 
 
    float: left; 
 
    margin: 20px 0 0 20px; 
 
    padding: 2px; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
} 
 

 
.log[type=button] { 
 
    background-color: white; 
 
    color: #008cff; 
 
    border-radius: 4px; 
 
    font-weight: bold; 
 
    border: none; 
 
    padding: 1px 2px 2px 2px; 
 
    position: relative; 
 
    left: 5px; 
 
    top: 3px; 
 
} 
 

 
.tracy { 
 
    float: left; 
 
    margin: 0 10px; 
 
    position: relative; 
 
} 
 
.img-container{ 
 
    float: left; 
 
    height: 220px; 
 
    width: 206px; 
 
    position: relative; 
 
} 
 

 
.fade-img { 
 
    float: left; 
 
    top: 0; 
 
    bottom: 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    -webkit-transition: opacity 2s ease-out; 
 
    -moz-transition: opacity 2s ease-out; 
 
    transition: opacity 2s ease-out; 
 
    transition-delay: 1s; 
 
} 
 

 
.main { 
 
    background-color: #f7f4f4; 
 
    margin-right: 480px; 
 
    margin-left: 20px; 
 
    box-shadow: 10px 10px 10px #1f2963; 
 
    border-radius: 12px; 
 
    padding-bottom: 20px; 
 
    overflow: auto; \t 
 
} 
 

 
.tmacLogo { 
 
    position: relative; 
 
    top: 12px; 
 
    left: 10px; 
 
} 
 

 
hr {margin-bottom: 8px;} 
 
.main h1 { 
 
    text-align: center; 
 
    background-color: white; 
 
    padding-bottom: 10px; 
 
    color: #3f3c3c; 
 
    text-shadow: 2px 3px 2px #ff2b4b; 
 
    font-size:30px; 
 
    letter-spacing: 2.5px; 
 
} 
 
.main p {padding: 2px 5px 0;}

<div class="container"> 
 
    <header> 
 
     <h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1> 
 
     <div class="thenav" onload="changed()"> 
 

 
      <nav class="top"> 
 
       <ul> 
 
        <li><a href="http://www.nba.com"/>Home</a></li> 
 
        <li onclick="changeP()"><a href="#">About</a></li> 
 
        <li><a href="#">Players</a> 
 
         <ul> 
 
          <li onmouseover="slow()"><a href="#"/>T-Mac <img src="tmaclogo.png" width="10px" height="10px"></a></li> 
 
          <li><a href="#kobesec"/>Kobe</a></li> 
 
          <li><a href="#"/>Kevin Durant</a></li> 
 
          <li><a href="#"/>The Goat</a></li> 
 
         </ul> 
 
        </li> 
 
        <li onclick="slow()"><a href="#">News</a></li> 
 
       </ul> 
 

 
       <div class="userlogin"> 
 
        <form action="/action_page.php"> 
 
         Username<br> 
 
         <input type="text" name="User" maxlength="20"/> 
 
         </br> 
 

 
         Password </br> 
 
         <input type="Password" name="User"/> 
 
         <input type="button" onclick="x('green','80px')" value="Login" class="log"/> 
 
        </form> 
 
       </div> 
 
      </nav> 
 
     </div> 
 
    </header> 
 
\t \t 
 
    <div class="main"> 
 
     <h1 onmouseover="changeStyle()">T-Mac <img src="tmaclogo.png" alt="TmaC" width="55px" height="42px" class="tmacLogo"/></h1> 
 
     <hr style="color:red;"> 
 
     <div class="img-container"> 
 
      <img src="http://i.imgur.com/1yiEfva.jpg" alt="TmaC" width="175px" height="220px" onclick="slow()" class="tracy fade-img"> 
 
     </div> 
 
     <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release </p>  
 
    </div> \t 
 
\t 
 
    <div class="stat"> 
 
     <input type="button" value="Stats" onclick="newText()"> 
 
    </div> 
 
</div>

這裏是什麼我不明白的圖像：

http://imgur.com/uwySgnl

Answer 1

首先第一件事情：

• 沒有這樣的東西color: 162354;，顏色sh應該以十六進制（#eeeeee），rgb（rgb(0,0,0)）或rgba（rgba(0,0,0,.7)）格式聲明。
• border-bottom-radius: 5px;也是無效的。它應該是border-bottom-left-radius或border-bottom-right-radius或兩者。
• 對於任何元素，包括.top ul li ul li，您都不能將background-color兩次。它應該是一個background-color: #6db8f2;或background-color:#f76778;或任何其他顏色。

我重新格式化了代碼，刪除了與您的問題無關的部分，並將所有JavaScript註釋掉了。正如@LGSon在評論中提到你有多件事情的煩惱，包括absolute和relative的定位。

我的建議是，你編輯你的代碼部分，而不是一次全部一起。通過這種方式，您可以跟蹤實際發生的情況，並保持訂單。

這不是最優雅的解決方案，但它涉及格式化您的代碼。現在您的下拉菜單正確顯示。

/*function slow(){ 
 
    document.getElementsByClassName("tracy")[0] 
 
    .style.opacity = 0; 
 
    var tracy1 = document.createElement("img"); 
 
    tracy1.src = "https://cdn5.kicksonfire.com/wp-content/uploads/2015/08/TRACY-MCGRADY-WAS-IN-CHINA-TO-RE-LAUNCH-THE-ADIDAS-T-MAC-5-4.jpg?x77385"; 
 
    tracy1.style.width = "175px"; 
 
    tracy1.style.height = "220px"; 
 
    tracy1.style.opacity = 0; 
 
    tracy1.style.float = "left"; 
 
    tracy1.style.marginLeft = "10px"; 
 
    tracy1.className = "fade-img"; 
 
    document.getElementsByClassName("img-container")[0] 
 
    .appendChild(tracy1); 
 
    setTimeout(function(){tracy1.style.opacity = 1;},0); 
 
};*/

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
} 
 
header, nav, section, aside, footer, article { 
 
    display: block; 
 
} 
 
.container { 
 
    margin:0 auto; 
 
    background-color: #f7f7f7; 
 
    background-size: cover; 
 
    width: 1300px; 
 
    padding-top:5px; 
 
    height: 100%; 
 
} 
 
header { 
 
    margin:0 0 2px; 
 
    border-bottom: 2px groove #ffae00; 
 
} 
 
header h1 { 
 
    text-align: center; 
 
    padding: 20px 0 25px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    color: #f4ca1f; 
 
    background:linear-gradient(to right, #5092f4, #f29641); 
 
} 
 
.thenav { 
 
    background-color: #3b63d3; 
 
    height: 85px; 
 
    opacity: 0.9; 
 
    position: relative; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 
.nba {margin-right: 10px;} 
 
.top { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.top ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.top ul li { 
 
    float: left; 
 
    background-color: #3b63d3; 
 
    width: 90px; 
 
    text-align: center; 
 
    border-right: 1px groove #141e38; 
 
    position: relative; 
 
} 
 
.top ul li a { 
 
    display: block; 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 33px 10px; 
 
} 
 
.top ul li a:hover { 
 
    background-color: #47e586; 
 
    -webkit-transition: all 0.90s; 
 
    -moz-transition: all 0.90s; 
 
    transition: all 0.90s; 
 
} 
 
.top ul li ul li a { 
 
    padding: 8px; 
 
    text-align:center; 
 
} 
 
.top ul li ul li{ 
 
    border: 4px groove grey; 
 
    border-radius: 4px; 
 
    opacity: 1; 
 
    background-color:#f76778; 
 
    position: relative; 
 
} 
 
.top ul li ul li:nth-child(1) a:hover{background-color: blue;} 
 
.top ul li ul li a:hover{background-color: red;} 
 
.top ul li ul {display: none;} 
 
.top ul li:hover ul{ 
 
    position:absolute; 
 
    display: block; 
 
} 
 
.main { 
 
    background-color: #f7f4f4; 
 
    margin-right: 0 480px 0 20px; 
 
    box-shadow: 10px 10px 10px #1f2963; 
 
    border-radius: 12px; 
 
    padding-bottom: 20px; 
 
    overflow: auto; 
 
} 
 
.main h1 { 
 
    text-align: center; 
 
    background-color: white; 
 
    padding-bottom: 10px; 
 
    color: #3f3c3c; 
 
    text-shadow: 2px 3px 2px #ff2b4b; 
 
    font-size:30px; 
 
    letter-spacing: 2.5px; 
 
} 
 
.main p {padding: 2px 5px 0;} 
 
.img-container{ 
 
    float: left; 
 
    height: 220px; 
 
    width: 206px; 
 
} 
 
.tmacLogo { 
 
    position: relative; 
 
    top: 12px; 
 
    left: 10px; 
 
} 
 
hr {margin-bottom: 8px;}

<div class="container"> 
 
    <header> 
 
     <image src="nbaone.png" width="40px" height="55px" class="nba"> 
 
     <h1 id="box" onload="changed()">NBA Legends</h1> 
 
     <div class="thenav" onload="changed()"> 
 

 
      <nav class="top"> 
 
       <ul> 
 
        <li><a href="http://www.nba.com"/>Home</a></li> 
 
        <li onclick="changeP()"><a href="#">About</a></li> 
 
        <li><a href="#">Players</a> 
 
         <ul> 
 
          <li onmouseover="slow()"><a href="#"/>T-Mac <img src="tmaclogo.png" width="10px" height="10px"></a></li> 
 
          <li><a href="#kobesec"/>Kobe</a></li> 
 
          <li><a href="#"/>Kevin Durant</a></li> 
 
          <li><a href="#"/>The Goat</a></li> 
 
         </ul> 
 
        </li> 
 
        <li onclick="slow()"><a href="#">News</a></li> 
 
       </ul> 
 

 
      </nav> 
 
     </div> 
 
    </header> 
 
\t \t 
 
    <div class="main"> 
 
     <h1 onmouseover="changeStyle()">T-Mac <img src="tmaclogo.png" alt="TmaC" width="55px" height="42px" class="tmacLogo"/></h1> 
 
     <hr style="color:red;"> 
 
     <div class="img-container"> 
 
      <img src="http://i.imgur.com/1yiEfva.jpg" alt="TmaC" width="175px" height="220px" onclick="slow()" class="tracy fade-img"> 
 
     </div> 
 
     <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release </p>  
 
    </div> \t 
 
</div>