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;or 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 回答