不同定位元素的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

回答

相关问题