1

背景を含む div にクリック可能な画像を含む div を配置しようとしています。ただし、これは引き続き発生します。

http://gyazo.com/2144dfe91b46898e125787b2f5249542

画像の下にあり、その理由がわかりません。

ここに私のコードがあります:

!DOCTYPE html>
<html>
<head>
<title>SlammedPK</title>
<link rel="shortcut icon" href="dragonclaws.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css"> 
    <style type"text/css">
    #title{
        height:100%;
        width:100%;
        display:inline-block;
    }
    #forum{
        height:10%;
        width:10%;
        background-image:forum.png;
        display:block;
    }
    </style>
</head>
</body>
<div id="container">
    <div id="title" style="position:relative" alt="title">
    <img src='fulltitle.png' style='width:100%;height:100%' alt='[]' />
    </div>
    <div id="forum" style="position:absolute" alt="forum">
    <A HREF="http://google.com"><IMG SRC="forum.png" ALT="forum"></A>
    </div>
</div>
</body>
</html>

あなたがそれを助けることができれば、それは素晴らしいことです.

4

2 に答える 2

0

まず、背景画像の形式が正しくありません。background-image: url(forum.png);同じことが必要です#title。imgその中に背景画像もあるのに、なぜ背景画像を与えるのかわかりません

あなたの問題に関しては、#container position:relative;またはを与える必要がありますposition:absolute。絶対配置要素は、子または相対的に配置された親でなければなりません

于 2013-11-02T19:41:12.243 に答える
0

私はこの JsFiddle を作りました: http://jsfiddle.net/2c7eQ/

両方作っ#forumて#titleposition: absolute

HTML:

<div id="container">
    <div id="title">
    div1
    </div>
    <div id="forum">
    div2
    </div>
</div>

CSS:

#title{
        position: absolute;
        border: 1px solid;
        background-color: blue;
        height:100%;
        width:100%;
}
#forum{
        position: absolute;
        left: 100px;
        top: 100px;
        border: 1px solid;
        background-color: green;
        height:10%;
        width:10%;
}
于 2013-11-02T20:14:32.990 に答える