Z-index |需要幫助我的網站

代碼：

div.banniere{ 
    background-image:url('../img/banniere.png'); 
    background-repeat: no-repeat; 
    background-position: -23px 0; 
    height: 750px; 
    width: 100%; 
    position: absolute; 
    z-index: -1; 
} 

p.menu-king{ 
    color: white; 
    transform: rotate(270deg); 
    width: 250px; 
    height: 75px; 
    padding-bottom: 100px; 
    margin-bottom: 75px; 
    z-index: 1; 
} 

div.menu-bar{ 
    background: black; 
    top: 0; 
    position: fixed; 
    height: 100%; 
    width: 70px; 
    list-style: none; 
    z-index: -2; 
    margin-top: 100px; 
} 


div.menu-bar > ul{ 
    text-decoration: none; 
    list-style: none; 
    font-size: 24px; 
    position: absolute; 
    z-index: 1; 
} 

li.menu{ 
    font-size: 40px; 
    height: 64px; 
} 

li.menu > span{ 
    visibility: hidden; 
} 

li.menu:hover > span{ 
    visibility: visible; 
} 

li.menu:hover > span > a{ 
    background: black; 
    padding-left: 50px; 
    padding-right: 20px; 
    text-decoration: none; 
    color: #ffffff; 
    transition: all 0.7s ease-out; 
    display:inline; 
} 


img.menu-icon{ 
    position: absolute; 
    left: 5px; 
    margin-bottom: 70px; 
    z-index: 1; 
} 


<div class="banniere"></div> 
    <div class="menu-bar"> 
     <p class="menu-king">The king's offical website</p> 
     <ul> 
      <li class="menu"><img src="../img/1a.png" alt="home" class="menu-icon" /><span><a href="index.php?page=index">Accueil</a></span></li> 
      <li class="menu"><img src="../img/2b.png" alt="home" class="menu-icon" /><span><a href="index.php?page=new">Actualité</a></span></li> 
      <li class="menu"><img src="../img/2b.png" alt="home" class="menu-icon" /><span><a href="index.php?page=wof">WoF</a></span></li> 
      <li class="menu"><img src="../img/2b.png" alt="home" class="menu-icon" /><span><a href="index.php?page=post-tester">POST-tester</a></span></li> 
      <li class="menu"><img src="../img/2b.png" alt="home" class="menu-icon" /><span><a href="index.php?page=contact">Contact</a></span></li> 
     </ul> 
    </div> 
    <div class="contenu">

欲：

的div.banniere - >在Z位置：-1
div.menu巴 - >在Z位置：-2
div.menu杆> ALL - >在Z位置：1

卜t在我的代碼中不起作用...爲什麼？

感謝您的支持！

祝好，Bonvin Maxime。

來源

2014-04-01 Alaanor

你可以把你的HTML代碼，以及更好，如果你創建一個小提琴並分享確切的問題 – ajc

它很大程度上取決於您的HTML代碼 –

很多依賴於你的html代碼。但是，如果您對容器項目進行z-索引和放置，就足夠了，您無需將z-index和位置添加到容器的所有子元素。我也看到你已經添加了z-index到p.menu-king，但是那個錯過了位置屬性。沒有設置的位置，z-index沒有效果。我建議你只添加z-index到容器，並清理你的代碼。

來源

2014-04-01 17:43:58

Z-index |需要幫助我的網站

回答

相關問題