Question

这里，包含<p>（defintion）的div将放在包含图像（图像）的div后面。我尝试在定义div上进行绝对定位，这样它就应该出现在与图像相同的堆栈中，如下所述。

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 {
}

Answer 1

在进入Z-index之前，首先要做一些基本的修正。

在html文档中，使用的id必须是唯一的。要重复命名约定，您应该使用类。

在容器和图像使用类的代码中。喜欢类=“容器” 类= “图像”

Answer 2

做了一些改变 - 希望它能回答你的问题。

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

并且如果你让事情浮动，不要忘记clear:both。

Working Fiddle here

不同定位元素的z-index

2 个答案: