1

在这里，包含<p>（定义）的 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 {
}
4

2 回答 2

0

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

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

在容器和图像使用类的代码中。像 class="container" class="image"

于 2013-11-09T17:01:48.483 回答
0

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

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如果你让事情浮起来:)

在这里工作小提琴

于 2013-11-23T16:45:46.310 回答