ドロップダウンメニューの上に画像が浮いています

Question

「プレイヤー」というドロップダウンナビゲーションバーが画像の背後にある理由を理解しようとしています。私は、 "トップ"クラスのZ-インデックスを "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 ogd（#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を2回入力することはできません。 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>