Question

我正在尝试在包含背景的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>

如果你能提供帮助那就太棒了。

Answer 1

首先，您的背景图片格式不正确，您需要background-image: url(forum.png);和#title相同的内容。我不确定为什么你给它一个背景图片，当你在其中有一个img

时

至于您的问题，您需要提供#container position:relative;或position:absolute。绝对定位的元素必须是孩子或相对定位的父母

Answer 2

我做了这个JsFiddle：http://jsfiddle.net/2c7eQ/

让#forum和#title都为position: 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%;
}

Div定位在另一个div上

2 个答案: