帶有更多項目的HTML定位

我對HTML很陌生，目前我正在爲自己創建一個自定義主頁，其中包含我經常訪問的網站的鏈接。帶有更多項目的HTML定位

當我將鼠標懸停在圖片上時，它會展開以顯示更具體的鏈接（即subreddits）。

但是，問題是「子鏈接圖標」沒有正確地與擴展的DIV對齊。當它懸停在它上面時，它會顯示在大圖的前面。

我所試圖做的是有子鏈接圖標，是與擴大DIV同步*

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
     <title>Homepage</title> 
    </head> 
    <body> 
     <div class="submenu" id="steam"><a href="http://store.steampowered.com" target="_blank"><img src="steam.png"></a></div> 
     <div class="submenu" id="reddit"> 
      <a href="http://www.reddit.com"><img src="reddit.png"/></a> 
      <ul> 
       <li><img src="reddit.png"/></li> 
       <li><img src="reddit.png"/></li> 
       <li><img src="reddit.png"/></li> 
      </ul> 
     </div> 
     <div class="submenu" id="youtube"><a href="http://www.youtube.com"><img src="youtube.png"/></a></div> 
    </body> 
</html>

CSS：

body { 
    background-color: #330000; 
    color: white; 
} 

div img { 
    width:256px; 
    height:256px; 
    border-radius:5px; 
} 

li img { 
    width:75px; 
    height:75px; 
    border-radius:15px; 
} 

#youtube:hover { 
    border: #E6E6E6 solid 4px; 
    background-color: #E6E6E6; 
} 

#steam:hover { 
    border: #12151A solid 4px; 
    background-color: #12151A; 
} 

#g2a:hover { 
    border: #0F1F2E solid 4px; 
    background-color: #0F1F2E; 
} 

#reddit:hover { 
    border: #999999 solid 4px; 
    background-color: #999999; 
} 

ul{ 
    position:absolute; 
    list-style-type: none; 
    display:none; 
    margin-left: 125px; 
} 

.submenu { 
    border-radius: 5px; 
    position:relative; 
    display: inline-block; 
    margin-left: 0px; 
    width:256px; 
    height:256px; 
    border:4px solid #330000; 
    text-align:center; 
    margin-left:5px; 
    margin-top:5px; 
    transition: width 1s; 
    z-index:0; 
} 

.submenu img { 
    float:left; 
} 

.submenu:hover { 
    width:350px; 
    transition: width 1s; 
} 

.submenu:hover img { 
    float:left; 
    z-index:2; 
} 

.submenu ul { 
    position: absolute; 
} 

.submenu:hover ul { 
    display:inline-block; 
    float:right; 
    margin-top:-10px; 
    margin-left:-45px; 
    position:absolute; 
    z-index: 1; 
} 

.submenu:hover ul li img { 
    float:left; 
    margin-left: -30px; 
    margin-top: 12.5px; 
}

我試過在網上尋找幫助，但無法完全管理它。

JSFIDDLE

來源

2015-10-02 StevoHN

請指定你想如何顯示子鏈接圖標 – Chris

對不起，如果不清楚。我希望他們能夠在更大的鏈接圖片後面滑動，並在您將鼠標懸停時與div展開同步。 – StevoHN

讓我們去通過這個一步一步來。

第一個問題：懸停時，「子圖標鏈接」分層放置在您的大圖片上，而不是放在下面。

這是可以用z-index修復的，但首先你必須瞭解z-index是如何工作的。

注意：z-index只適用於定位元素（position：absolute，position：relative或position：fixed）。

使用z-index，您可以對位於同一HTML層的元素進行圖層佈局。因爲它不起作用，我假設你已經嘗試在子菜單鏈接上應用z-index。這是行不通的，因爲大局與他們不在同一層。如果我們看看你的HTML結構，你會看到：

<div class="submenu" id="reddit"> 
     <a href="http://www.reddit.com"><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></a> 
     <ul> 
      <li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li> 
      <li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li> 
      <li><img src="http://www.workatplay.com/files/styles/fpo_medium/public/article/logo/Reddit%20Small.jpg?itok=dclAuuiP"/></li> 
     </ul> 
</div>

要在這種情況下使用的z-index，你必須看到，在哪點的圖像或它們的容器都在同一層上。

你的大圖像包含錨標籤內（一）
你小的圖像包含
這些列表項包含一個無序列表

內列表項中

這個無序列表和錨標籤位於同一圖層上。將z-index應用於其中之一將解決此問題。

注意：當使用像「position：absolute」和「position：fixed」之類的東西時，或者改變HTML堆棧中元素位置的任何其他屬性時，這會有所不同。

的jsfiddle：https://jsfiddle.net/eehdo8wa/5/

我所做的：

增加「的z-index：-1;」到「.submenu ul」
刪除「z-index：1;」從「.submenu：懸停UL」

第二期：在懸停時，‘子圖標鏈接’應在相同的速率DIV擴大擴大

那麼，這樣做應該是非常簡單，現在照片正確地在大圖下分層。基本上，當你想到它時，你所要做的就是讓照片粘在其父母的右側，所以當它膨脹時，照片會向右側滑動，並將其帶入視野。

的jsfiddle：https://jsfiddle.net/eehdo8wa/6/

我做了什麼：

我重做了一些CSS，使其所以一切都已經在滑動到視圖前的正確位置。這在本質上就是你想要的。在你原創的小提琴中，你在懸停部分有很多造型，改變了各種造型和間距，但它真的需要嗎？最後，沒有。現在，它已經位於大圖像的後面，準備好滑入視圖。

來源

2015-10-02 12:23:33 Mitjan

非常感謝你的回答！ :) – StevoHN

帶有更多項目的HTML定位

回答

相關問題