CSS将div放在图像顶部

Question

我正在尝试将一个选择移到我的＆＃34;标题＆＃34;图像。

问题是当我float:left时，它显然只是位于图像下方。我尝试过使用margin和padding，在这种情况下似乎都没有帮助我。我做错了什么？

正确的展示位置（红色框）：

我把它放在整个图像下面的位置错误：

这是我的编码：

<div id="wrapper">

<div id="header">
    <img src="/images/placeholder_header.jpg" width="100%" height="215"/>
</div>
<div>
<select id="language" style="float:left;">
    <option value="">Select Language</option>
</select>
</div>

我尝试了很多东西，但主要是：

#language { margin:5px;}

或padding或position:relative或z-index依此类推......

Answer 1

选项很少，我只会展示其中两个：

#language {
    margin-top: -30px; /*adjust this value as needed*/
}

如果上述内容对您无效，请尝试此操作：

#language {
    position: relative;
    top: -30px; /*adjust this value as needed*/
    z-index: 9999;
}

注意： z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

Answer 2

这就是职位的目的：绝对：

#header {
position: relative;
}

#language {
position: absolute;
bottom: 0;
left: 0;
}

在#header中移动#language。