不同定位元素的z-index

這裏，包含<p>（defintion）的div將被放置在包含圖像（圖像）的div的後面。我試圖在定義div上進行絕對定位，以便它能像圖像一樣出現在相同的堆棧上，如下所述。不同定位元素的z-index

definition { 
position: absolute; 
top:0 
}

但是，然後設置z-index不起作用了。如果有人有任何解決辦法，請幫助我。這是我的整個代碼。

HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <link href="StyleSheet.css" rel="stylesheet" /> 
</head> 
<body> 
    <div id="outer_container"> 
     <div id="container"> 
      <div id="image"> 
       <img src="work_pic.jpg" /> 
       <div id="definition"> 
        <p>Nothing</p> 
       </div> 
      </div> 
     </div> 
     <div id="container"> 
      <div id="image"> 
       <img src="work_pic.jpg" /> 
       <div id="definition"> 
        <p>Nothing</p> 
       </div> 
      </div> 
     </div> 
     <div id="container"> 
      <div id="image"> 
       <img src="work_pic.jpg" /> 
       <div id="definition"> 
        <p>Nothing</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

CSS

#outer_container { 
    text-align: center; 
} 

#container { 
    position: relative; 
    display: inline-block; 
} 

#definition { 
    background-color: red; 
} 

#image { 
}

來源

2013-11-09 user2957214

一個'Z-index'需要定位，從你的參考定義不包括主題標籤，因爲它是一個ID的第一個實例一旁..'#definition {}'。 –

有沒有其他方法？ – user2957214

反向使用#definition？ – user2957214

臨睡前Z-指數，首先你必須做出一些基本的更正。

在一個html文檔中，使用的id必須是唯一的。對於重複的命名約定，你應該使用類。

在您的代碼容器和圖像使用類。 like class =「container」 class =「image」

來源

2013-11-09 17:01:48

感謝提示，abel raj。:-) – user2957214

做了一些修改 - 希望它能回答你的問題。

CSS：

#outer_container { 
margin:auto; // margin:auto to center the div 
width:50%; 
} 

#outer_container .container { // The Boxes 
margin: 5px 10px 0px 0px; 
float:left; 
} 

.image { // Your Picture (used div instead of pic - better testing 
width:50px; 
height:50px; 
border: 1px solid black; 
} 

.definition { // Your "display item will be here" 
background-color: red; 
display:none; // display:none because u want to display it later 
} 

.image:hover .definition { 
//hover the image .image:hover and do something with .definition 
display:block; 
// display:block - when u hover the .img element .definition appears 
}

，如果你使用的樣式不止一次，你應該使用類中的CSS：

#id if you use it once
.class if u use it more than one time

和Don」 t忘記clear:both件如果u讓事情漂浮:)

Working Fiddle here

來源

2013-11-23 16:45:46

不同定位元素的z-index

回答

相關問題