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 インデックスに進む前に、まずいくつかの基本的な修正を行う必要があります。

HTML ドキュメントでは、使用される ID は一意でなければなりません。命名規則を繰り返すには、クラスを使用する必要があります。

コンテナとイメージのコードでクラスを使用します。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:bothif u let things floatを忘れないでください:)

ここで働くフィドル

于 2013-11-23T16:45:46.310 に答える